Actions

Widget

Difference between revisions of "Infomap"

From Dragon Eye Atlas

Line 39: Line 39:
map.addControl(new mapboxgl.ScaleControl());
map.addControl(new mapboxgl.ScaleControl());


map.setLayoutProperty('realms-labels', 'visibility', 'none');
map.on("load", function() {
  map.setLayoutProperty('realms-labels', 'visibility', 'none');


// Create a popup, but don't add it to the map yet.
  // Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
  var popup = new mapboxgl.Popup({
  closeButton: false,
      closeButton: false,
  closeOnClick: false
      closeOnClick: false
});
  });
   
   
map.on('mousemove', 'biomes', function(e) {
  map.on('mousemove', 'biomes', function(e) {
  if (e.features.length > 0) {
      if (e.features.length > 0) {
      // Change the cursor style as a UI indicator.
        // Change the cursor style as a UI indicator.
       map.getCanvas().style.cursor = 'pointer';
        map.getCanvas().style.cursor = 'pointer';
 
        // Populate the popup and set its coordinates
        // based on the feature found.
        popup.setLngLat(e.lngLat.wrap())
            .setHTML(e.features[0].properties.biome)
            .addTo(map);
      }
  });
 
  map.on('mouseleave', 'biomes', function() {
       map.getCanvas().style.cursor = '';
      popup.remove();
  });


      // Populate the popup and set its coordinates
      // based on the feature found.
      popup.setLngLat(e.lngLat.wrap())
        .setHTML(e.features[0].properties.biome)
        .addTo(map);
  }
});
});
   
   
map.on('mouseleave', 'biomes', function() {
  map.getCanvas().style.cursor = '';
  popup.remove();
});
</script>
</script>
</includeonly>
</includeonly>

Revision as of 08:55, 6 October 2019

Mapbox-GL-JS Information Map Widget

Parameters

  • lon, lat, zoom - longitude, latitude and zoom for the map (defaults: 1, 30, 4)
  • width, height - dimensions of the map itself on the page, in px or % (defaults: 100%, 600px)

Examples

  • {{#widget:Mapbox|bounds=[[0, 25], [8, 31]]}}
  • {{#Widget:Mapbox|lat=31|lon=-15.5|zoom=3}}