Skip to content

Instantly share code, notes, and snippets.

@rustyb

rustyb/index.html

Last active August 29, 2015 14:17
Show Gist options
  • 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
Loading
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
{
"type": "FeatureCollection",
"generator": "overpass-turbo",
"copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
"timestamp": "2015-04-01T07:46:02Z",
"features": [
{
"type": "Feature",
"id": "node/596530665",
"properties": {
"@id": "node/596530665",
"amenity": "hospital",
"name": "Tayler Bequest Hospital",
"@timestamp": "2013-06-21T07:41:30Z",
"@version": 2,
"@changeset": 16639916,
"@user": "Firefishy",
"@uid": 3560
},
"geometry": {
"type": "Point",
"coordinates": [
28.8212804,
-30.3479333
]
}
},
{
"type": "Feature",
"id": "node/1085510156",
"properties": {
"@id": "node/1085510156",
"amenity": "hospital",
"name": "Cathkin Park Local Authority Clinic",
"@timestamp": "2013-06-21T07:41:28Z",
"@version": 2,
"@changeset": 16639916,
"@user": "Firefishy",
"@uid": 3560
},
"geometry": {
"type": "Point",
"coordinates": [
29.4362946,
-29.0284204
]
}
},
{
"type": "Feature",
"id": "node/1313949451",
"properties": {
"@id": "node/1313949451",
"amenity": "hospital",
"@timestamp": "2011-06-06T09:54:52Z",
"@version": 1,
"@changeset": 8358355,
"@user": "Moseme",
"@uid": 463768
},
"geometry": {
"type": "Point",
"coordinates": [
27.517697,
-29.3475622
]
}
},
{
"type": "Feature",
"id": "node/1357955172",
"properties": {
"@id": "node/1357955172",
"amenity": "hospital",
"name": "Bobete Health Center",
"@timestamp": "2011-07-11T16:20:20Z",
"@version": 1,
"@changeset": 8695241,
"@user": "jhiscox",
"@uid": 433897
},
"geometry": {
"type": "Point",
"coordinates": [
28.6670387,
-29.4229806
]
}
},
{
"type": "Feature",
"id": "node/1605121942",
"properties": {
"@id": "node/1605121942",
"amenity": "hospital",
"name": "Ntsekhe Hospital",
"@timestamp": "2012-01-31T09:36:26Z",
"@version": 2,
"@changeset": 10547449,
"@user": "Moseme",
"@uid": 463768
},
"geometry": {
"type": "Point",
"coordinates": [
27.4791359,
-30.1494353
]
}
},
{
"type": "Feature",
"id": "node/2221970779",
"properties": {
"@id": "node/2221970779",
"amenity": "hospital",
"name": "Manapo Hospital",
"@timestamp": "2013-03-25T10:22:33Z",
"@version": 1,
"@changeset": 15489613,
"@user": "Yolandie(EWCOP)",
"@uid": 776448
},
"geometry": {
"type": "Point",
"coordinates": [
28.8041196,
-28.5368583
]
}
},
{
"type": "Feature",
"id": "node/2282707581",
"properties": {
"@id": "node/2282707581",
"amenity": "hospital",
"name": "Tayler Bequest Hospital",
"wikipedia": "en:Tayler Bequest Hospital (Mount Fletcher)",
"@timestamp": "2013-04-27T02:01:59Z",
"@version": 1,
"@changeset": 15878657,
"@user": "Firefishy",
"@uid": 3560
},
"geometry": {
"type": "Point",
"coordinates": [
28.5100223,
-30.6892724
]
}
},
{
"type": "Feature",
"id": "node/2687262303",
"properties": {
"@id": "node/2687262303",
"amenity": "hospital",
"emergency": "yes",
"name": "Mafeteng Hospital",
"source": "bing",
"@timestamp": "2014-03-12T12:40:12Z",
"@version": 2,
"@changeset": 21063049,
"@user": "Ithatz",
"@uid": 1933157
},
"geometry": {
"type": "Point",
"coordinates": [
27.2390076,
-29.8107343
]
}
},
{
"type": "Feature",
"id": "node/3318209584",
"properties": {
"@id": "node/3318209584",
"amenity": "hospital",
"name": "Peka Health center",
"@timestamp": "2015-01-29T08:39:52Z",
"@version": 1,
"@changeset": 28481323,
"@user": "Mampho Shale",
"@uid": 2609751
},
"geometry": {
"type": "Point",
"coordinates": [
27.7524761,
-28.9651436
]
}
},
{
"type": "Feature",
"id": "node/3318629120",
"properties": {
"@id": "node/3318629120",
"amenity": "hospital",
"@timestamp": "2015-01-29T12:49:35Z",
"@version": 1,
"@changeset": 28484991,
"@user": "Malerole",
"@uid": 2609971
},
"geometry": {
"type": "Point",
"coordinates": [
28.1612664,
-28.8083967
]
}
},
{
"type": "Feature",
"id": "node/3359327683",
"properties": {
"@id": "node/3359327683",
"amenity": "hospital",
"name": "CLINIC",
"@timestamp": "2015-02-19T12:07:50Z",
"@version": 1,
"@changeset": 28954879,
"@user": "Edgar zola",
"@uid": 2679307
},
"geometry": {
"type": "Point",
"coordinates": [
27.725068,
-29.4466816
]
}
}
]
}
Display the source blob
Display the rendered blob
Raw
test.json
Loading
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