Actions

Widget

Difference between revisions of "Infomap"

From Dragon Eye Atlas

Line 47: Line 47:
   // 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';
 
  var coordinates = e.features[0].geometry.coordinates.slice();
console.log(coordinates);
  var description = e.features[0].properties.biome;
  // Ensure that if the map is zoomed out such that multiple
  // copies of the feature are visible, the popup appears
  // over the copy being pointed to.
  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
  }
   // Populate the popup and set its coordinates
   // Populate the popup and set its coordinates
   // based on the feature found.
   // based on the feature found.
   popup.setLngLat(coordinates)
   popup.setLngLat(e.lngLat.wrap())
       .setHTML(description)
       .setHTML(e.features[0].properties.biome)
       .addTo(map);
       .addTo(map);
});
});

Revision as of 18:07, 22 September 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}}