Outils pour utilisateurs

Outils du site


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 &copy; <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">&copy; 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