Actions

Widget

Infomap: Difference between revisions

From Dragon Eye Atlas

No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 16: Line 16:
a.mapbox-ctrl-logo { display: none !important; }
a.mapbox-ctrl-logo { display: none !important; }
div.mapboxgl-ctrl-bottom-right { display: none !important; }
div.mapboxgl-ctrl-bottom-right { display: none !important; }
div.mapboxgl-control-container button { margin: 0; }
</style>
</style>


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


map.on("load", function() {
  map.setLayoutProperty('realms-labels', 'visibility', 'none');
  map.setLayoutProperty('POIs', '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>

Latest revision as of 00:22, 28 November 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}}