Skip to content

Instantly share code, notes, and snippets.

@rustyb

rustyb/index.html

Last active August 29, 2015 14:17
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 rustyb/f9cda0b23a74e94e5927 to your computer and use it in GitHub Desktop.
Save rustyb/f9cda0b23a74e94e5927 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicnVzdHkiLCJhIjoib0FjUkJybyJ9.V9QoXck_1Z18MhpwyIE2Og';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
//.setView([53.34943, -6.25963], 9);
//.setView([-29.226, 29.075], 9);
//var schoolsLayer = new L.MarkerClusterGroup();
var schoolsLayer = L.mapbox.featureLayer()
var hospitalsLayer = L.mapbox.featureLayer()
schoolsLayer.loadURL('markers_lesotho_schools_2007.geojson');
//schoolsLayer.addTo(map);
hospitalsLayer.loadURL('overpass.geojson');
hospitalsLayer.on('ready', function(layer){
this.eachLayer(function(marker) {
// The argument to L.mapbox.marker.icon is based on the
// simplestyle-spec: see that specification for a full
// description of options.
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#DC143C',
'marker-size': 'small',
'marker-symbol':'hospital'
}));
marker.bindPopup('<strong>' + marker.feature.properties.name + '</strong>', { closeButton: true });
});
});
hospitalsLayer.addTo(map);
// reset marker size to small
function reset() {
var hospitalFeatures = hospitalsLayer.getGeoJSON();
for (var i = 0; i < hospitalFeatures.features.length; i++) {
hospitalFeatures.features[i].properties['marker-size'] = 'small';
};
hospitalsLayer.setGeoJSON(hospitalFeatures);
};
schoolsLayer.on('ready', function(e){
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
map.fitBounds(schoolsLayer.getBounds());
// Bind a popup to each feature in hospitalLayer and libraryLayer
schoolsLayer.eachLayer(function (layer) {
layer.bindPopup('<strong>' + layer.feature.properties.name + '</strong>', { closeButton: false });
});
// Open popups on hover
schoolsLayer.on('mouseover', function (e) {
e.layer.openPopup();
});
// Use turf to find the nearest school
schoolsLayer.on('click', function (e) {
// Reset any and all marker sizes to small
reset();
var hospitalFeatures = hospitalsLayer.getGeoJSON();
var schoolFeatures = schoolsLayer.getGeoJSON();
// Using Turf, find the nearest hospital to library clicked
//var nearestSchool = turf.nearest(e.layer.feature, schoolFeatures);
var nearestHospital = turf.nearest(e.layer.feature, hospitalFeatures);
// Change the nearest hospital to a large marker
//nearestSchool.properties['marker-size'] = 'large';
nearestHospital.properties['marker-size'] = 'large';
nearestHospital.properties['marker-symbol'] = 'hospital';
nearestHospital.properties['marker-color'] = '#DC143C';
// Add the new GeoJSON to hospitalLayer
//schoolsLayer.setGeoJSON(schoolFeatures);
hospitalsLayer.setGeoJSON(hospitalFeatures);
// Bind popups to new hospitalLayer and open popup
// for nearest hospital
hospitalsLayer.eachLayer(function (layer) {
layer.bindPopup('<strong>' + layer.feature.properties.name + '</strong>', { closeButton: false });
if (layer.feature.properties['marker-size'] === 'large') {
layer.openPopup();
};
});
});
});
map.on('click', function (e) {
reset();
});
/*schoolsLayer.on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
var content = '<h2>' + layer.feature.properties.reg_ref + '<\/h2>' +
'<p>' + layer.feature.properties.la + '<br \/>' +
layer.feature.properties.decision + '<br \/><\/p>';
layer.bindPopup(content);
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
map.fitBounds(clusterGroup.getBounds());
clusterGroup.on('mouseover', function (e) {
e.layer.openPopup();
});*/
/*
clusterGroup.on('click', function (e) {
var schoolFeatures = clusterGroup.getGeoJSON();
var nearestSchool = turf.nearest(e.layer.feature, schoolFeatures);
nearestSchool.properties['marker-size'] = 'large';
// Add the new GeoJSON to hospitalLayer
clusterGroupLayer.setGeoJSON(schoolFeatures);
});
});*/
// Note that calling `.eachLayer` here depends on setting GeoJSON _directly_
// above. If you're loading GeoJSON asynchronously, like from CSV or from a file,
// you will need to do this within a `featureLayer.on('ready'` event.
/*featureLayer.on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
/*featureLayer.eachLayer(function(layer) {
// here you call `bindPopup` with a string of HTML you create - the feature
// properties declared above are available under `layer.feature.properties`
var content = '<h2>' + layer.feature.properties.reg_ref + '<\/h2>' +
'<p>' + layer.feature.properties.la + '<br \/>' +
layer.feature.properties.decision + '<br \/><\/p>';
//console.log(typeof(layer.feature.properties.decision))
layer.bindPopup(content);
});*/
//});
//////////////////////
//var baseTiles = L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-4y9ngu48/{z}/{x}/{y}.png', {
// maxZoom: 18
// });
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
markers_lesotho_schools_2007.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
overpass.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
test.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment