Search code examples
javascriptleafletgeocodingmaptiler

Maptiler Geocoding make markers interactive

I have a circle in my map. I want the marker from the MapTiler Geocoding search to be clickable and/or colored differently to demonstrate if it is inside the circle or not.

The code I have below works. It's mostly straight from their site, but I cannot make the marker one that can be clicked or changed at all. Or if I can retrieve the lat/long directly from the search, but anything I've found has not returned any results.

I've tried some other free geocoders but even common addresses could not be found and I need it to be able to find practically anything.

Any help would be greatly appreciated, I'm open to other geocoders but they need to be free and find a broad number of addresses.

const key = 'MYKEY';
const map = L.map('map').setView([35.992256, -83.925643], 10);

const layer = L.tileLayer(`https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=${key}`, {
  tileSize: 512,
  zoomOffset: -1,
  minZoom: 1,
  attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
  crossOrigin: true
}).addTo(map);

var markercenter = L.marker([0, 0]).addTo(map);
markercenter.bindPopup("CenterOfCircle").openPopup();

var circle = L.circle([0, 0], {
  color: 'blue',
  fillColor: 'blue',
  fillOpacity: 0.1,
  radius: 40233.6
}).addTo(map);

var search = L.control.maptilerGeocoding({
  apiKey: key,
  flyTo: false,
}).addTo(map);
body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdn.maptiler.com/maptiler-geocoding-control/v1.3.3/leaflet.umd.js"></script>
<link href="https://cdn.maptiler.com/maptiler-geocoding-control/v1.3.3/style.css" rel="stylesheet">

<div id="map"></div>

Solution

  • Unfortunately it is not trivial to fully customize the marker in the current version of MapTiler Geocoding Control without lot of custom code (by writing your own Controller and derived Leaflet geocoding control). You can now easily only set the marker properties - for example to change its icon, by setting marker or showResultMarkers control option.

    Regarding getting the lat/lon - you can listen event response on the Map but there is a plan to refactor it as it is currently poorly designed.