CODEWITHSUNDEEP
javascriptleaflet
Jean-Paul Harreman
Jean-Paul Harreman

Reputation: 11

Leaflet & GeoJson: can't get toolTip to work

Made a map of Europe, with highlighting on the polygons and a clickthrough to a URL, based on a GeoJSON file.

I would like to put labels (country code)in the polygons and have a way to may toolTips work.

The code I have is this:

var geojson;
var lat = 50.0755381;
var long = 14.43780049999998;
url = "europe.js"

var map = L.map('map').setView([lat, long], 4); 

// Set background to fully transparent, would prefer to have this white, with no background.
L.tileLayer('  https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibmlja255ciIsImEiOiJjajduNGptZWQxZml2MndvNjk4eGtwbDRkIn0.L0aWwfHlFJVGa-WOj7EHaA', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  opacity: 0,
  id: 'mapbox.dark'
}).addTo(map);

//setting default style
var style =({
    weight: 1,
    color: '#ffffff',
    fillColor: '#12CBDA',
    dashArray: '',
    fillOpacity: 0.6

});

// getting data from the geojson....
// I have the property fields: name, code, url, coverage and text
// the geometry data is correctly used and hover works nicely
// below I've also succeeded in getting the link to url to work
// I want to parse the name (as header) and text properties to a toolTip
// Ideally I would put the country code on the map as a label

var layer = new L.GeoJSON(countries_data, { style: style,
    onEachFeature: function (feature, layer) {
        layer.on('mouseover', function () {
        this.setStyle({
          'fillColor': '#015270',
          'color': '#015270',
          'opacity': 0.8,
          'weight': 2
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
        this.bindTooltip("some text");
        }
},

      layer.on('mouseout', function () {
        this.setStyle(style);
        this.bringToBack();
        }));

      layer.on('click', function () {
      window.location = feature.properties.url;
        });   
    }
  }).addTo(map);

Thanks for your suggestions!

Upvotes: 1

Views: 1330

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Don't add the tooltip in the mouseover event:

ar layer = new L.GeoJSON(countries_data, { style: style,
    onEachFeature: function (feature, layer) {
        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            this.bindTooltip("some text");
        }
        layer.on('mouseover', function () {
        this.setStyle({
          'fillColor': '#015270',
          'color': '#015270',
          'opacity': 0.8,
          'weight': 2
        });
        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
              layer.bringToFront();
        }

},

      layer.on('mouseout', function () {
        this.setStyle(style);
        this.bringToBack();
        }));

      layer.on('click', function () {
      window.location = feature.properties.url;
        });   
    }
  }).addTo(map);

Upvotes: 1

Related Questions