Skip to content

Instantly share code, notes, and snippets.

@rustyb rustyb/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
You can’t perform that action at this time.