Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/index.html

Last active August 29, 2015 14:01
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 mpmckenna8/bd612a103ace714a6368 to your computer and use it in GitHub Desktop.
Save mpmckenna8/bd612a103ace714a6368 to your computer and use it in GitHub Desktop.
Download ZIP
Polygons with multiple popups open Fav DC spots
Raw
readme.md

Here's a little map of my favorite two tourist spots I hit up on my recent trip (April 2014) to Washington DC. The two places highlighted are the National Botanical Garden and the Thomas Jefferson Building Library of Congress.

I wanted to get multiple popups being open at the same time to work with the typical map loading method but failed. Maybe I have to use stuff like that as is if I do the L.mapbox.map thing???

Oh well if you have a day free in DC and haven't checked out these two free destinations I highly recommend them.

Plus if you know how to make the mapbox.js api to work with multiple popups as I confusedly described above let me know.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A DC Tourist Map</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="points" type="application/json" href="./map.geojson">
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
function initialize() {
$.getJSON($('link[rel="points"]').attr("href"), function(data) {
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup(); // just comment this
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.place);
},
style:function(feature){
if(feature.properties.place === "National Botanic Garden and Conservatory"){
return {color:"red"}
}
else{
return {color:"purple"}
}
},
closeOnClick:false
});
var mytile = L.tileLayer('https://{s}.tiles.mapbox.com/v3/mpmckenna8.i60p2il1/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});
var map = L.map('map').addLayer(mytile)
.setView([38.889, -77.0170], 15);
geojson.addTo(map);
});
}
initialize();
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
map.geojson
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