-
-
Save ix4/e59e2aa2ca577e6c6c1ef95ad0729c65 to your computer and use it in GitHub Desktop.
Proposed border structures in red
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Leaflet and D3 Map</title> | |
| <meta charset="utf-8" /> | |
| <link | |
| rel="stylesheet" | |
| href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" | |
| /> | |
| </head> | |
| <style> | |
| </style> | |
| <body> | |
| <div id="map" style="width:900; height: 600px"> | |
| </div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://d3js.org/queue.v1.min.js"></script> | |
| <script | |
| src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> | |
| </script> | |
| <script> | |
| var mapLink2 = '<a href="http://www.esri.com/">Esri</a>'; | |
| var wholink = | |
| 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'; | |
| var map = L.map('map').setView([ 31.334044, -110.150749], 10); | |
| var cartoLight = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>', | |
| subdomains: 'abcd', | |
| maxZoom: 19 | |
| }); | |
| // var sat = L.tileLayer('https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/MODIS_Terra_Aerosol/default/2014-04-09/GoogleMapsCompatible_Level6/{z}/{x}/{y}.png', { | |
| // attribution:'© '+mapLink2+', '+wholink, | |
| // maxZoom: 19 | |
| // }); | |
| // var sat = L.tileLayer.wms('http://isse.cr.usgs.gov/arcgis/services/Orthoimagery/USGS_EROS_Ortho_1Foot/ImageServer/WMSServer', { | |
| // layers: '0', | |
| // format: 'image/png', | |
| // version: '1.3.0', | |
| // attribution: '<a href="http://gisdata.usgs.gov/service_access_list.php?serviceid=Dataset_7&dataset=HRO">USGS</a>', | |
| // maxZoom: 19 | |
| // }); | |
| var sat = L.tileLayer('https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWRldm9pZDE2IiwiYSI6ImNqeWtpN2xpcDA5YzEza24xd3k4ajd3ZmoifQ.Kk8GtRCZU0nK4bZwu5AnBw', { | |
| attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', | |
| maxZoom: 18 | |
| }) | |
| // 'http://{s}.tiles.mapbox.com/styles/mapbox/satellite-v9/{z}/{x}/{y}?access_token={pk.eyJ1IjoiYWRldm9pZDE2IiwiYSI6ImNqeWtpN2xpcDA5YzEza24xd3k4ajd3ZmoifQ.Kk8GtRCZU0nK4bZwu5AnBw}.png' | |
| // http://{s}.tiles.mapbox.com/styles/mapbox/satellite-v9/{z}/{x}/{y}.png | |
| // https://api.mapbox.com/styles/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token={pk.eyJ1IjoiYWRldm9pZDE2IiwiYSI6ImNqeWtpN2xpcDA5YzEza24xd3k4ajd3ZmoifQ.Kk8GtRCZU0nK4bZwu5AnBw | |
| // 'styles/mapbox/satellite-v9' | |
| // | |
| // | |
| // "https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/1/0/0.mvt?access_token=pk.eyJ1IjoiYWRldm9pZDE2IiwiYSI6ImNqeWtpN2xpcDA5YzEza24xd3k4ajd3ZmoifQ.Kk8GtRCZU0nK4bZwu5AnBw" | |
| cartoLight.addTo(map); | |
| // map.on("zoomend", function(e){ | |
| // console.log("Zoom level: ", map.getZoom()); | |
| // if(map.getZoom() > 6){ //Level 6 is the treshold | |
| // map.removeLayer(cartoLight); | |
| // sat.addTo(map); | |
| // }else if(map.getZoom() < 7){ | |
| // map.removeLayer(sat); | |
| // cartoLight.addTo(map); | |
| // } | |
| // }); | |
| map.on("zoomend", function(e){ | |
| console.log("Zoom level: ", map.getZoom()); | |
| if(map.getZoom() > 10){ //Level 6 is the treshold | |
| map.removeLayer(cartoLight); | |
| sat.addTo(map); | |
| }else if(map.getZoom() <= 10){ | |
| map.removeLayer(sat); | |
| cartoLight.addTo(map); | |
| } | |
| }); | |
| // Add an SVG element to Leaflet’s overlay pane | |
| var svg = d3.select(map.getPanes().overlayPane).append("svg").style("position", "absolute"), | |
| g = svg.append("g").attr("class", "leaflet-zoom-hide"), | |
| gNew = svg.append("g").attr("class", "leaflet-zoom-hide"); | |
| queue() | |
| .defer(d3.json, 'https://gist.githubusercontent.com/Alex-Devoid/80dfd51549d31d4ae9c5a81f919c0515/raw/0b74f2ed6fa114bc1378c4d79fc2b8c6dd6a4cb9/border-fence.geojson') | |
| .defer(d3.json, 'proposed.geojson') | |
| .await(makePlot); | |
| function fenceBar(fence, geoShape){ | |
| // create a d3.geo.path to convert GeoJSON to SVG | |
| var transform = d3.geo.transform({point: projectPoint}), | |
| path = d3.geo.path().projection(transform); | |
| var color = d3.scale.linear().domain([1,11]) | |
| .range([d3.rgb("#870008"), d3.rgb('#ff4b55')]); | |
| var div = d3.select("#map").append("div") | |
| .attr("class", "datamaps-hoverover") | |
| // .style("position", "absolute") | |
| .style('opacity', 0); | |
| // create path elements for each of the features | |
| var d3_features = g.selectAll(".fence") | |
| .data(fence.features) | |
| .enter().append("path") | |
| .attr("class", 'fence'); | |
| var d3_featuresNew = gNew.selectAll(".new") | |
| .data(geoShape.features) | |
| .enter().append("path") | |
| .attr("class", 'new') | |
| .on('mouseover', function(d) { | |
| console.log(d); | |
| console.log(d.properties.project); | |
| // var position = d3.mouse(this); | |
| // console.log(this); | |
| div | |
| .html(d.properties.project) | |
| .style('opacity', .75); | |
| d3_featuresNew.on("mousemove", function() { | |
| return div.style('top', ( (d3.event.pageY)-30) + "px") | |
| .style('left', ( (d3.event.pageX)+5) + "px") | |
| }); | |
| }).on('mouseout', function ( d ) { | |
| d3.selectAll('.datamaps-hoverover').style('opacity', 0); | |
| }); | |
| map.on("viewreset", reset); | |
| reset(); | |
| // fit the SVG element to leaflet's map layer | |
| function reset() { | |
| bounds = path.bounds(fence); | |
| var topLeft = bounds[0], | |
| bottomRight = bounds[1]; | |
| svg .attr("width", bottomRight[0] - topLeft[0]) | |
| .attr("height", bottomRight[1] - topLeft[1]) | |
| .style("left", topLeft[0] + "px") | |
| .style("top", topLeft[1] + "px"); | |
| g.attr("transform", "translate(" + -topLeft[0] + "," | |
| + -topLeft[1] + ")"); | |
| gNew.attr("transform", "translate(" + -topLeft[0] + "," | |
| + -topLeft[1] + ")"); | |
| // initialize the path data | |
| d3_features.attr("d", path) | |
| .style("stroke-opacity", 0.9) | |
| .attr("fill", "none") | |
| .attr("stroke", function(d,i){ | |
| if (d.properties.gen_type === 'pedestrian') { | |
| return '#000ffd'; | |
| //#fdee00 | |
| }else if(d.properties.gen_type === 'vehicle') { | |
| return '#000ffd'; | |
| }else if(d.properties.gen_type === null) { | |
| // if (d.properties.barrier === 'fence') { | |
| return '#000ffd'; | |
| // }else { | |
| console.log(d.properties.barrier); | |
| // } | |
| }else { | |
| console.log("gen_type :" + d.features[i].properties.gen_type); | |
| } | |
| }) | |
| .style("stroke-linejoin", "round") | |
| .attr("stroke-width","5px"); | |
| d3_featuresNew.attr("d", path) | |
| .style("stroke-opacity", 1) | |
| .attr("fill", "none") | |
| .attr("stroke", "#fd000f") | |
| .attr("stroke-width","5px") | |
| .style("stroke-linejoin", "round"); | |
| } | |
| // Use Leaflet to implement a D3 geometric transformation. | |
| function projectPoint(x, y) { | |
| var point = map.latLngToLayerPoint(new L.LatLng(y, x)); | |
| this.stream.point(point.x, point.y); | |
| } | |
| } | |
| function makePlot(error, existing, build){ | |
| console.log(existing); | |
| // console.log(veh); | |
| // console.log(geoShape); | |
| fenceBar(existing,build) | |
| // vehicleBar(veh) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment