|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset=utf-8 /> |
|
<title>Leaflet Vector Grid</title> |
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> |
|
|
|
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script> |
|
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script> |
|
<!--script src="https://getbounds.com/apps-plugins/vectorgrid/leaflet-vector-grid-bundled-working.js"></script--> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js" integrity="sha256-k1l+ouvMXT+0iRA8pc8e0dge4ZeGjXG6imrvWboFTRE=" crossorigin="anonymous"></script> |
|
<style> |
|
body { |
|
margin:0; |
|
padding:0; |
|
} |
|
#map { |
|
position:absolute; |
|
top:0; |
|
bottom:0; |
|
width:100%; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div id='map'></div> |
|
|
|
<!-- Parcel file for map --> |
|
<script> |
|
// Object to hold our map options |
|
var parcels, |
|
id = 0; |
|
|
|
var data = omnivore.topojson('https://reyemtm.github.io/data/topojson/matchewb.parcels.topo.json'); |
|
data.on('ready', function() { |
|
parcels = data.toGeoJSON(); |
|
buildMap(); |
|
}); |
|
|
|
var options = { |
|
center: [37.95, -122.32], |
|
zoom: 12, |
|
minZoom: 12, |
|
maxZoom: 19, |
|
}, |
|
map = L.map('map', options); // Create map object and pass it our options object from above |
|
|
|
// load map tiles and add to map |
|
var tiles = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', { |
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a> | Map Authored by <a href="https://bazini627.github.io/" target="blank">Matthew Bacinskas</a> | <a href="https://getbounds.com">Malcolm Meyer</a>', |
|
subdomains: 'abcd', |
|
maxZoom: 19 |
|
}).addTo(map); |
|
|
|
map.createPane('parcelPane'); |
|
map.getPane('parcelPane').style.zIndex = 650; |
|
|
|
function buildMap() { |
|
var tileLayer = L.vectorGrid.slicer(parcels, { |
|
rendererFactory: L.canvas.tile, |
|
vectorTileLayerStyles: { |
|
sliced: { |
|
fillColor: "transparent", |
|
color: "blue", |
|
weight: .5 |
|
} |
|
}, |
|
maxZoom: 22, |
|
indexMaxZoom: 5, // max zoom in the initial tile index |
|
interactive: true, |
|
getFeatureId: function(feature) { |
|
return feature.properties["cartodb_id"] |
|
} |
|
}).addTo(map); |
|
tileLayer.on('click', function(e) { |
|
console.log(e); |
|
if (e.layer.feature) { |
|
var prop = e.layer.feature.properties; |
|
//var latlng = [e.latlng.lat,e.latlng.lng]; |
|
}else { |
|
var prop = e.layer.properties; |
|
//var latlng = [Number(parcel.y),Number(parcel.x)]; |
|
} |
|
//settimeout otherwise when map click fires it will override this color change |
|
if (id != 0) { |
|
tileLayer.setFeatureStyle(id, { |
|
color:"blue", |
|
weight: .5, |
|
}); |
|
} |
|
id = prop["cartodb_id"]; |
|
setTimeout(function() { |
|
tileLayer.setFeatureStyle(id, { |
|
color: "red" |
|
}, 100); |
|
}); |
|
}); |
|
|
|
/* Need to add something to change the style back once another parcel is clicked*/ |
|
|
|
} |
|
|
|
</script> |
|
</body> |
|
</html> |
