Actions

Widget

Infomap: Difference between revisions

From Dragon Eye Atlas

← Older edit
No edit summary
No edit summary
 
(9 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 34: Line 35:
<!--{/if}-->
<!--{/if}-->
var map = new mapboxgl.Map(options);
var map = new mapboxgl.Map(options);
map.addControl(new mapboxgl.FullscreenControl());
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.NavigationControl());
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('mouseenter', 'biomes', function(e) {
  map.on('mousemove', 'biomes', function(e) {
  // Change the cursor style as a UI indicator.
      if (e.features.length > 0) {
  map.getCanvas().style.cursor = 'pointer';
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';
  var coordinates = e.features[0].geometry.coordinates.slice();
 
console.log(coordinates);
        // Populate the popup and set its coordinates
  var description = e.features[0].properties.biome;
        // based on the feature found.
        popup.setLngLat(e.lngLat.wrap())
  // Ensure that if the map is zoomed out such that multiple
            .setHTML(e.features[0].properties.Biome)
  // copies of the feature are visible, the popup appears
            .addTo(map);
  // over the copy being pointed to.
      }
  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
   });
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
 
  }
   map.on('mouseleave', 'biomes', function() {
       map.getCanvas().style.cursor = '';
   // Populate the popup and set its coordinates
       popup.remove();
  // based on the feature found.
  });
   popup.setLngLat(coordinates)
 
       .setHTML(description)
       .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}}


Retrieved from "http://lemuria.org/dragoneye/index.php?title=Widget:Infomap&oldid=1520"