Skip to content

Instantly share code, notes, and snippets.

@porn

porn/leaflet-pip.html

Last active June 3, 2016 13:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save porn/59e187ea7ab209a8581107b4f66f5f67 to your computer and use it in GitHub Desktop.
Save porn/59e187ea7ab209a8581107b4f66f5f67 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
leaflet-pip.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
<script type='text/javascript'>
window.onload=function(){
var map = new L.Map('map', {center: new L.LatLng(49.1, -122.5), zoom: 10});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(osm);
function handleClick(e) {
var html = '';
var match = leafletPip.pointInLayer(
e.latlng, // the clicked point
streets, // one big geojson object to walk through
// L.geoJson(e.layer.feature), // clicked layer
false // whether to stop at first match
);
if (match.length) {
for (var i = 0; i < match.length; i++) {
html += JSON.stringify(match[i].feature.properties) + "<hr>";
}
}
if (html) {
map.openPopup(html, e.latlng);
}
}
var streets = new L.geoJson(JSON.parse('{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"stroke":"#555555","stroke-width":2,"stroke-opacity":1,"fill":"#32b63c","fill-opacity":0.5},"geometry":{"type":"Polygon","coordinates":[[[-122.46322631835938,49.14219020768315],[-122.46322631835938,49.27049279471154],[-122.18994140624999,49.27049279471154],[-122.18994140624999,49.14219020768315],[-122.46322631835938,49.14219020768315]]]}},{"type":"Feature","properties":{"stroke":"#555555","stroke-width":2,"stroke-opacity":1,"fill":"#ea1414","fill-opacity":0.5},"geometry":{"type":"Polygon","coordinates":[[[-122.32452392578125,49.08466020484928],[-122.32452392578125,49.230153752280884],[-122.04574584960938,49.230153752280884],[-122.04574584960938,49.08466020484928],[-122.32452392578125,49.08466020484928]]]}},{"type":"Feature","properties":{"stroke":"#555555","stroke-width":2,"stroke-opacity":1,"fill":"#555555","fill-opacity":0.5},"geometry":{"type":"Polygon","coordinates":[[[-122.37396240234375,49.026162996368946],[-122.37396240234375,49.18529393173625],[-122.25723266601562,49.18529393173625],[-122.25723266601562,49.026162996368946],[-122.37396240234375,49.026162996368946]]]}},{"type":"Feature","properties":{"stroke":"#555555","stroke-width":2,"stroke-opacity":1,"fill":"#1a28cc","fill-opacity":0.5},"geometry":{"type":"Polygon","coordinates":[[[-122.52227783203125,49.255257474803116],[-122.42202758789061,49.27855664807512],[-122.45223999023436,49.30005381244688],[-122.51266479492188,49.30721745093609],[-122.57720947265624,49.297367179514715],[-122.59643554687499,49.262427623047934],[-122.60330200195312,49.21670007971533],[-122.57034301757812,49.19516658452543],[-122.51541137695311,49.19067925930702],[-122.464599609375,49.19516658452543],[-122.42340087890624,49.205934504336255],[-122.42340087890624,49.23643087933334],[-122.52227783203125,49.255257474803116]]]}}]}'));
streets.on('click', handleClick);
streets.addTo(map);
}
</script>
</head>
<body><div id="map" style="width: 800px; height: 500px;"></div></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment