CODEWITHSUNDEEP
javascriptleaflet
Itération 122442
Itération 122442

Reputation: 2962

How to put a title on a leaflet geoJSON?

I have a geoJSON object that is added to the map like this:

L.geoJSON(seine_mar).addTo(map)

Which creates the following:

enter image description here

I would like to add a text on hover of this zone. It is possible with markers, like this for example:

L.marker([value.lat, value.lon], { title: "Hi there"}).addTo(map);

How could I achieve the same with the geoJSON, resulting in displaying a text on hover ? According to the docs, there is no such property as title or label.

Example of desired result (fear my paint skills):

enter image description here

Upvotes: 0

Views: 1474

Answers (2)

User863
User863

Reputation: 20039

Try using bindTooltip() with permanent option

https://leafletjs.com/reference-1.7.1.html#tooltip

var map = L.map('map').setView([39.74739, -105], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox/light-v9',
  tileSize: 512,
  zoomOffset: -1
}).addTo(map);

var campus = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [-105.00432014465332, 39.74732195489861],
        [-105.00715255737305, 39.74620006835170],
        [-105.00921249389647, 39.74468219277038],
        [-105.01067161560059, 39.74362625960105],
        [-105.01195907592773, 39.74290029616054],
        [-105.00989913940431, 39.74078835902781],
        [-105.00758171081543, 39.74059036160317],
        [-105.00346183776855, 39.74059036160317],
        [-105.00097274780272, 39.74059036160317],
        [-105.00062942504881, 39.74072235994946],
        [-105.00020027160645, 39.74191033368865],
        [-105.00071525573731, 39.74276830198601],
        [-105.00097274780272, 39.74369225589818],
        [-105.00097274780272, 39.74461619742136],
        [-105.00123023986816, 39.74534214278395],
        [-105.00183105468751, 39.74613407445653],
        [-105.00432014465332, 39.74732195489861]
      ]
    ]
  }
};

L.geoJSON(campus)
  .bindTooltip('Hi there', {
    permanent: true,
    direction: 'center'
  })
  .addTo(map);
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

<div id='map'></div>

Upvotes: 1

Falke Design
Falke Design

Reputation: 11338

You can use the onEachFeature function of L.geoJSON() to loop through all layers and then add a Tooltip with layer.bindTooltip("HI") to it.

L.geoJSON(seine_mar,{
 onEachFeature: function(feature, layer){
   layer.bindTooltip('Hi there', {permanent: true}).openTooltip(); 
   // or over a feature property layer.bindTooltip(feature.properties.customTitle)
 }
}).addTo(map)

Upvotes: 0

Related Questions