Old school D3 from simpler times

All examples By author By category About

gpetrioli

Full window Github gist

multiple layer select with labels not working yet

Built with blockbuilder.org

forked from renauld94's block: multiple layer select with labels not working yet

<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON with Leaflet + D3 using L.D3SvgOverlay</title>

<style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100% }
    </style>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css'
    	rel='stylesheet' type='text/css'/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

<style>
    .leaflet-marker-icon {
	color: #fff;
	font-size: 16px;
	line-height: 16px;	
	text-align: center;
	vertical-align: middle;
	box-shadow: 2px 1px 4px rgba(0,0,0,0.3);
	border-radius: 8px;
	border:1px solid #fff;
}
.pharmacy.leaflet-marker-icon {
	background: #f6f
}
.hospital.leaflet-marker-icon {
	background: #66f
}
  </style>
</head>
<body>
  <div id="map-canvas"></div>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>
<script src="pharmacy.geojson.js"></script>
<script src="hospital.geojson.js"></script>
<script src="L.D3SvgOverlay.min.js"></script>
<script src="leaflet/label.js"></script>
<script>

var map = L.map("map-canvas", {center: [10.762622, 106.660172], zoom: 11});
var tiles = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Sanisphere'
});
tiles.addTo(map);
  
  var geojsonOpts = {
    pointToLayer: function(feature, latlng) {
      return L.marker(latlng, {
        icon: L.divIcon({
          className: feature.properties.amenity,
          iconSize: L.point(16, 16),
          html: feature.properties.amenity[0].toUpperCase(),
        })
      }).bindPopup(feature.properties.amenity+'<br><b>'+feature.properties.name_full+'<br><b>'
                   +feature.properties.id+'</b>');
    }
  };

var ward = [];
var wardOverlay = L.d3SvgOverlay(function(sel, proj) {
	
  var upd = sel.selectAll('path').data(ward);
  upd.enter()
    .append('path')
    .attr('d', proj.pathFromGeojson)
    .attr('stroke', 'red')
    .attr('fill-opacity', '0.2');
  upd.attr('stroke-width', 1 / proj.scale);
});
  
  
var province = [];
var provinceOverlay = L.d3SvgOverlay(function(sel, proj) {
	
  var upd = sel.selectAll('path').data(province);
  upd.enter()
    .append('path')
    .attr('d', proj.pathFromGeojson)
    .attr('stroke', 'black')
    .attr('fill-opacity', '0.1');
  upd.attr('stroke-width', 1 / proj.scale);
});

L.control.layers({"Geo Tiles": tiles}, {"province": provinceOverlay, "ward": wardOverlay}).addTo(map);

d3.json("ward.geo.json", function(data) { ward = data.features; wardOverlay.addTo(map) });
d3.json("province.geo.json", function(data) { province = data.features; provinceOverlay.addTo(map) });

var poiLayers = L.layerGroup([
		L.geoJson(pharmacy, geojsonOpts),
		L.geoJson(hospital, geojsonOpts)
	])
	.addTo(map);
</script>
    
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js