renauld94/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from renauld94's block: Markers with no clustering and selection by area
forked from gordonwoodhull's block: Markers with no clustering and selection by area

  
## hosp.geo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              hosp.geo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## HOSP_CLINICS.geo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              HOSP_CLINICS.geo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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">

</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="L.D3SvgOverlay.min.js"></script>
<script src="leaflet/label.js"></script>
<script>

  //change for open streetmaps or multiselection #an attribution is obligatory as per the copyright notice

var map = L.map("map-canvas", {center: [10.762622, 106.660172], zoom: 11});
var tiles = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Sanisphere&copy'
});
tiles.addTo(map);


var hospital = [];
var hospitalOverlay = L.d3SvgOverlay(function(sel, proj) {

  var upd = sel.selectAll('path').data(hospital);
  upd.enter()
    .append('path')
    .attr('d', proj.pathFromGeojson)
    .attr('stroke', 'black')
    .attr('fill-opacity', '0.1');
});


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, "hospital": hospitalOverlay}).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) });
d3.json("hosp.geo.json", function(data) { province = data.features; provinceOverlay.addTo(map) });


</script>

</body>
</html>

## L.D3SvgOverlay.min.js
/**
 * Copyright 2015 Teralytics AG
 *
 * @author Kirill Zhuravlev <kirill.zhuravlev@teralytics.ch>
 *
 */
(function(factory){if(typeof define==="function"&&define.amd){define(["leaflet","d3"],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory(require("leaflet","d3"))}else{factory(L,d3)}})(function(L,d3){if(typeof d3=="undefined"){throw"D3 SVG Overlay for Leaflet requires D3 library loaded first"}if(typeof L=="undefined"){throw"D3 SVG Overlay for Leaflet requires Leaflet library loaded first"}if(L.version>="1.0"){d3.select("head").append("style").attr("type","text/css").text("g.d3-overlay *{pointer-events:visiblePainted;}")}L.D3SvgOverlay=(L.version<"1.0"?L.Class:L.Layer).extend({includes:L.version<"1.0"?L.Mixin.Events:[],_undef:function(a){return typeof a=="undefined"},_options:function(options){if(this._undef(options)){return this.options}options.zoomHide=this._undef(options.zoomHide)?false:options.zoomHide;options.zoomDraw=this._undef(options.zoomDraw)?true:options.zoomDraw;return this.options=options},_disableLeafletRounding:function(){this._leaflet_round=L.Point.prototype._round;L.Point.prototype._round=function(){return this}},_enableLeafletRounding:function(){L.Point.prototype._round=this._leaflet_round},draw:function(){this._disableLeafletRounding();this._drawCallback(this.selection,this.projection,this.map.getZoom());this._enableLeafletRounding()},initialize:function(drawCallback,options){this._options(options||{});this._drawCallback=drawCallback},_zoomChange:function(evt){this._disableLeafletRounding();var newZoom=this._undef(evt.zoom)?this.map._zoom:evt.zoom;this._zoomDiff=newZoom-this._zoom;this._scale=Math.pow(2,this._zoomDiff);this.projection.scale=this._scale;this._shift=this.map.latLngToLayerPoint(this._wgsOrigin)._subtract(this._wgsInitialShift.multiplyBy(this._scale));var shift=["translate(",this._shift.x,",",this._shift.y,") "];var scale=["scale(",this._scale,",",this._scale,") "];this._rootGroup.attr("transform",shift.concat(scale).join(""));if(this.options.zoomDraw){this.draw()}this._enableLeafletRounding()},onAdd:function(map){this.map=map;var _layer=this;if(L.version<"1.0"){map._initPathRoot();this._svg=d3.select(map._panes.overlayPane).select("svg");this._rootGroup=this._svg.append("g")}else{this._svg=L.svg();map.addLayer(this._svg);this._rootGroup=d3.select(this._svg._rootGroup).classed("d3-overlay",true)}this._rootGroup.classed("leaflet-zoom-hide",this.options.zoomHide);this.selection=this._rootGroup;this._pixelOrigin=map.getPixelOrigin();this._wgsOrigin=L.latLng([0,0]);this._wgsInitialShift=this.map.latLngToLayerPoint(this._wgsOrigin);this._zoom=this.map.getZoom();this._shift=L.point(0,0);this._scale=1;this.projection={latLngToLayerPoint:function(latLng,zoom){zoom=_layer._undef(zoom)?_layer._zoom:zoom;var projectedPoint=_layer.map.project(L.latLng(latLng),zoom)._round();return projectedPoint._subtract(_layer._pixelOrigin)},layerPointToLatLng:function(point,zoom){zoom=_layer._undef(zoom)?_layer._zoom:zoom;var projectedPoint=L.point(point).add(_layer._pixelOrigin);return _layer.map.unproject(projectedPoint,zoom)},unitsPerMeter:256*Math.pow(2,_layer._zoom)/40075017,map:_layer.map,layer:_layer,scale:1};this.projection._projectPoint=function(x,y){var point=_layer.projection.latLngToLayerPoint(new L.LatLng(y,x));this.stream.point(point.x,point.y)};this.projection.pathFromGeojson=d3.geo.path().projection(d3.geo.transform({point:this.projection._projectPoint}));this.projection.latLngToLayerFloatPoint=this.projection.latLngToLayerPoint;this.projection.getZoom=this.map.getZoom.bind(this.map);this.projection.getBounds=this.map.getBounds.bind(this.map);this.selection=this._rootGroup;if(L.version<"1.0")map.on("viewreset",this._zoomChange,this);this.draw()},getEvents:function(){return{zoomend:this._zoomChange}},onRemove:function(map){if(L.version<"1.0"){map.off("viewreset",this._zoomChange,this);this._rootGroup.remove()}else{this._svg.remove()}},addTo:function(map){map.addLayer(this);return this}});L.D3SvgOverlay.version="2.1";L.d3SvgOverlay=function(drawCallback,options){return new L.D3SvgOverlay(drawCallback,options)}});

## province.geo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              province.geo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## ward.geo.json

      
    Raw
  

              ward.geo.json
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	<!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">

	</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="L.D3SvgOverlay.min.js"></script>
	<script src="leaflet/label.js"></script>
	<script>

	//change for open streetmaps or multiselection #an attribution is obligatory as per the copyright notice

	var map = L.map("map-canvas", {center: [10.762622, 106.660172], zoom: 11});
	var tiles = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Sanisphere&copy'
	});
	tiles.addTo(map);


	var hospital = [];
	var hospitalOverlay = L.d3SvgOverlay(function(sel, proj) {

	var upd = sel.selectAll('path').data(hospital);
	upd.enter()
	.append('path')
	.attr('d', proj.pathFromGeojson)
	.attr('stroke', 'black')
	.attr('fill-opacity', '0.1');
	});


	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, "hospital": hospitalOverlay}).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) });
	d3.json("hosp.geo.json", function(data) { province = data.features; provinceOverlay.addTo(map) });



	</script>

	</body>
	</html>
	/**
	* Copyright 2015 Teralytics AG
	*
	* @author Kirill Zhuravlev <kirill.zhuravlev@teralytics.ch>
	*
	*/
	(function(factory){if(typeof define==="function"&&define.amd){define(["leaflet","d3"],factory)}else if(typeof module==="object"&&module.exports){module.exports=factory(require("leaflet","d3"))}else{factory(L,d3)}})(function(L,d3){if(typeof d3=="undefined"){throw"D3 SVG Overlay for Leaflet requires D3 library loaded first"}if(typeof L=="undefined"){throw"D3 SVG Overlay for Leaflet requires Leaflet library loaded first"}if(L.version>="1.0"){d3.select("head").append("style").attr("type","text/css").text("g.d3-overlay {pointer-events:visiblePainted;}")}L.D3SvgOverlay=(L.version<"1.0"?L.Class:L.Layer).extend({includes:L.version<"1.0"?L.Mixin.Events:[],_undef:function(a){return typeof a=="undefined"},_options:function(options){if(this._undef(options)){return this.options}options.zoomHide=this._undef(options.zoomHide)?false:options.zoomHide;options.zoomDraw=this._undef(options.zoomDraw)?true:options.zoomDraw;return this.options=options},_disableLeafletRounding:function(){this._leaflet_round=L.Point.prototype._round;L.Point.prototype._round=function(){return this}},_enableLeafletRounding:function(){L.Point.prototype._round=this._leaflet_round},draw:function(){this._disableLeafletRounding();this._drawCallback(this.selection,this.projection,this.map.getZoom());this._enableLeafletRounding()},initialize:function(drawCallback,options){this._options(options\|\|{});this._drawCallback=drawCallback},_zoomChange:function(evt){this._disableLeafletRounding();var newZoom=this._undef(evt.zoom)?this.map._zoom:evt.zoom;this._zoomDiff=newZoom-this._zoom;this._scale=Math.pow(2,this._zoomDiff);this.projection.scale=this._scale;this._shift=this.map.latLngToLayerPoint(this._wgsOrigin)._subtract(this._wgsInitialShift.multiplyBy(this._scale));var shift=["translate(",this._shift.x,",",this._shift.y,") "];var scale=["scale(",this._scale,",",this._scale,") "];this._rootGroup.attr("transform",shift.concat(scale).join(""));if(this.options.zoomDraw){this.draw()}this._enableLeafletRounding()},onAdd:function(map){this.map=map;var _layer=this;if(L.version<"1.0"){map._initPathRoot();this._svg=d3.select(map._panes.overlayPane).select("svg");this._rootGroup=this._svg.append("g")}else{this._svg=L.svg();map.addLayer(this._svg);this._rootGroup=d3.select(this._svg._rootGroup).classed("d3-overlay",true)}this._rootGroup.classed("leaflet-zoom-hide",this.options.zoomHide);this.selection=this._rootGroup;this._pixelOrigin=map.getPixelOrigin();this._wgsOrigin=L.latLng([0,0]);this._wgsInitialShift=this.map.latLngToLayerPoint(this._wgsOrigin);this._zoom=this.map.getZoom();this._shift=L.point(0,0);this._scale=1;this.projection={latLngToLayerPoint:function(latLng,zoom){zoom=_layer._undef(zoom)?_layer._zoom:zoom;var projectedPoint=_layer.map.project(L.latLng(latLng),zoom)._round();return projectedPoint._subtract(_layer._pixelOrigin)},layerPointToLatLng:function(point,zoom){zoom=_layer._undef(zoom)?_layer._zoom:zoom;var projectedPoint=L.point(point).add(_layer._pixelOrigin);return _layer.map.unproject(projectedPoint,zoom)},unitsPerMeter:256Math.pow(2,_layer._zoom)/40075017,map:_layer.map,layer:_layer,scale:1};this.projection._projectPoint=function(x,y){var point=_layer.projection.latLngToLayerPoint(new L.LatLng(y,x));this.stream.point(point.x,point.y)};this.projection.pathFromGeojson=d3.geo.path().projection(d3.geo.transform({point:this.projection._projectPoint}));this.projection.latLngToLayerFloatPoint=this.projection.latLngToLayerPoint;this.projection.getZoom=this.map.getZoom.bind(this.map);this.projection.getBounds=this.map.getBounds.bind(this.map);this.selection=this._rootGroup;if(L.version<"1.0")map.on("viewreset",this._zoomChange,this);this.draw()},getEvents:function(){return{zoomend:this._zoomChange}},onRemove:function(map){if(L.version<"1.0"){map.off("viewreset",this._zoomChange,this);this._rootGroup.remove()}else{this._svg.remove()}},addTo:function(map){map.addLayer(this);return this}});L.D3SvgOverlay.version="2.1";L.d3SvgOverlay=function(drawCallback,options){return new L.D3SvgOverlay(drawCallback,options)}});