/** * 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);