geo_data:associations_map_js
/** * Javascript pour construire la carte. * Utilise: * - Leaflet * - Leaflet.markercluster */
var dataFiles = { assosLayer: '/geo_data/associations_geojson?do=export_text', epnsLayer: '/geo_data/associations_geojson?datafilter=epn&do=export_text', adminLayer: '/_media/geo_data/agglo_tours_admin.geo.json', cucsLayer : '/_media/geo_data/cucs_wgs84.geo.json' , irisLayer: '/_media/geo_data/agglo_tours_iris2.geo.json', qppv2015: '/geo_data/quartiers-prioritaires-2015_wgs84_geojson?do=export_raw' //epnsLayer: '/_media/geo_data/espace-public-numerique-epn_37.geocode.geo.json' };
function mapInit() { var viewCenter = [ 47.3903853, 0.6899713 ]; // Tours admin_centre
var assosLayerGeoJson = L.geoJson(null, { onEachFeature : assos_onEachFeature }); var assosLayer = L.markerClusterGroup(); jQuery.getJSON( dataFiles.assosLayer, function( data) { assosLayerGeoJson.addData(data); assosLayer.addLayer(assosLayerGeoJson); });
var adminLayer = L.geoJson(null, { 'style' : admin_style, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: new AdminIcon()}) ; } }); jQuery.getJSON( dataFiles.adminLayer, function( data) { adminLayer.addData(data); });
var cucsLayer = L.geoJson(null, { onEachFeature : cucs_onEachFeature, 'style' : cucs_style }); jQuery.getJSON( dataFiles.cucsLayer, function( data) { cucsLayer.addData(data); }); var irisLayer = L.geoJson(null, { 'style' : iris_style }); jQuery.getJSON( dataFiles.irisLayer, function( data) { irisLayer.addData(data); }); var epnsLayer = L.geoJson( null, { pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: new EpnIcon()}) ; }, onEachFeature : epns_onEachFeature }); jQuery.getJSON( dataFiles.epnsLayer, function( data) { epnsLayer.addData(data); }); var qppvLayer = L.geoJson(null, { //onEachFeature : cucs_onEachFeature, style : qppv_style }); jQuery.getJSON( dataFiles.qppv2015 ) .done( function( data) { qppvLayer.addData(data); }); var overlayMaps = { "Insee iris" : irisLayer , "Admin" : adminLayer, "CUCS 2014" : cucsLayer , "QPPV 2015" : qppvLayer , "Assos" : assosLayer, 'EPNs assos <img src="http://savoirscommuns.comptoir.net/_media/geo_data/arobase-black_25x26.png" width="14px"/>' : epnsLayer } var tilesOsmFr = L .tileLayer( 'http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', { attribution : 'Map data © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="http://openstreetmap.fr">OpenStreetMap.FR</a>', maxZoom : 20 }); var tilesOpenMapquest = L .tileLayer( 'http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg', { attribution : 'Tuiles de fond <a href="http://www.mapquest.com/" target="_blank">© MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png"></div>', description : 'Tuiles OpenMapQuest', maxZoom : 19 }); var tilesMaps = { "OsmFR" : tilesOsmFr, "OpenMapquest" : tilesOpenMapquest };
map = L.map('map', { layers : [ tilesOsmFr, assosLayer ] }).setView(viewCenter, 12); L.control.layers( tilesMaps, overlayMaps,{collapsed:false}).addTo(map); //map.fitBounds(assosLayer.getBounds()); // error: TypeError: this._northEast is undefined
info = L.control(); info.onAdd = function( map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; };
info.update = function( props) { this._div.innerHTML = (props ? '<h4>' + props.title + '</h4>' + '<p>' + props.text + '</p>' : '<p>Afficher les infos sur un point</p>'); }; info.addTo(map); } function assos_onEachFeature( feature, layer) { if( feature.properties /* && feature.properties.popupContent */) { var p=feature.properties; layer.bindPopup('<h3><a href="'+p.page+'">' + p.name + '</a></h3>' + '<p>' + p.address + '<br/><a href="'+p.web+'">'+p.web+'</a>' + '</p>'); layer.on({ mouseover : assos_mouse_update_info, mouseout : assos_mouse_update_info, click : assos_mouse_update_info }); } } function assos_mouse_update_info( e) { if( e.type == "mouseout" ) { info.update(); return; } var p = e.target.feature.properties; info.update({ 'title' : p.name, 'text' : p.address + "<br/>" + p.web }); }
var AdminIcon = L.Icon.extend({ options: { iconUrl: '_media/geo_data/town-hall.png', iconSize: [26,26], iconAnchor: [0,0], popupAnchor: [12, 0] } }); function admin_style( feature) { return { fillColor : 'white', fillOpacity : 0, weight : 1, opacity : 1, color : 'purple' }; } function cucs_style( feature) { return { fillColor : cucs_style_getColor(feature.properties), weight : 2, color : 'grey', fillOpacity : 1 }; } function cucs_style_getColor( props) { switch( props.ZUS ) { case 1: return 'red'; default: } return 'orange'; } function cucs_onEachFeature( feature, layer) { if( feature.properties /* && feature.properties.popupContent */) { layer.bindPopup('<h3>' + feature.properties.name + '</h3>' + '<p>' + 'CUCS' + (feature.properties.ZUS == 1 ? ' + ZUS' : '') + '</p>'); layer.on({ mouseover : cucs_mouse_update_info, mouseout : cucs_mouse_update_info, click : cucs_mouse_update_info }); } } function cucs_mouse_update_info( e) { if( e.type == "mouseout" ) { info.update(); return; } var props = e.target.feature.properties; info.update({ 'title' : props.name, 'text' : 'CUCS' + (props.ZUS == 1 ? ' + ZUS' : '') }); } function epns_onEachFeature( feature, layer) { if( feature.properties /* && feature.properties.popupContent */) { var p=feature.properties; layer.bindPopup('<h3><a href="'+p.page+'">' + p.name + '</a></h3>' + '<p>' + p.address + '<br/><a href="'+p.web+'">'+p.web+'</a>' + '</p>'); layer.on({ mouseover : epns_mouse_update_info, mouseout : epns_mouse_update_info, click : epns_mouse_update_info }); } } function epns_mouse_update_info( e) { if( e.type == "mouseout" ) { info.update(); return; } var props = e.target.feature.properties; info.update({ 'title' : props.name, 'text' : props.address + "<br/>" + props.web }); } var EpnIcon = L.Icon.extend({ options: { iconUrl: 'http://savoirscommuns.comptoir.net/_media/geo_data/arobase-black_25x26.png', iconSize: [25,26], iconAnchor: [0,0], popupAnchor: [12, 0] } }); function qppv_style( feature) { return { fillColor : 'green', fillOpacity : 0.4, weight : 3, opacity : 1, color : 'black', dashArray : '2' }; } function iris_style( feature) { return { //fillColor : iris_style_getColor(feature.properties), fillOpacity : 0, weight : 2, opacity : 1, color : 'black', dashArray : '3' }; } function iris_style_getColor( props) { return 'green'; /* * return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > * 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? * '#FED976' : '#FFEDA0'; */ }
document.addEventListener('DOMContentLoaded', mapInit, false);
geo_data/associations_map_js.txt · Dernière modification : 21/08/2020 14:46 de administrateur