32 lines
1.2 KiB
HTML

<!-- template for the WFS3 API leaflet map -->
<div class="col-md-6">
<div id="mapid" class="small"></div>
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
var map = L.map( 'mapid', { attributionControl: false } ).setView( [0, 0], 13 );
L.control.attribution( { prefix: false } ).addTo( map );
L.control.fullscreen({
title: 'Enter fullscreen',
titleCancel: 'Exit fullscreen',
}).addTo(map);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
$.get( "{{ metadata.geojsonUrl }}", function( data ) {
var jl = L.geoJSON( data, {
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+feature.id +'</h1>');
}
}).addTo(map);
map.setView(jl.getBounds().getCenter());
if ( jl.getBounds().getEast() != jl.getBounds().getWest() && jl.getBounds().getNorth() != jl.getBounds().getSouth() )
{
map.fitBounds(jl.getBounds());
}
});
});
</script>
</div>