Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active August 29, 2015 13:57
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/9556860 to your computer and use it in GitHub Desktop.
Save mpmckenna8/9556860 to your computer and use it in GitHub Desktop.
Mapbox.js w/ geojson layer of polygons w/ popups

Sochi region has a lot going on

The 2014 Winter Olympics are gearing up and Sochi is in a fascinating region w/ a lot of it's neighboring states and countries in the news. Even if I don't get around to adding news stories to the map it's still an cool region to look at maps of especially with the cyrillic scrips. Which reminds me of a map I saw of the Boston Area w/ cyrillic scripts.

Click on one of the outlined states for its name in a format I can attempt to pronounce at least..

<Html>
<Head>
<!-- want to ask about this, is this their default styling for tiles or rules for cartoCSS and can I can change it up? -->
<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<script src="olymStates.geojson" type="text/javascript"></script>
<Style>
#map {
width:900px;
height:600px;
margin-right:auto;
margin-left:auto;
}
.header{
margin-right:auto;
margin-left:auto;
text-align:center;
}
</Style>
<title>Olympic 2014 Region Map</title>
</Head>
<Body>
<!-- this is the div I'm putting the map in Sochi is at 43.5854823, 39.723109-->
<Div id='map' class='dark'></Div>
<Script type='text/javascript'>
//insert your maptile code as the second argument to map()
var map = L.mapbox.map('map', 'mpmckenna8.map-5hpnzi5m')
.setView([43.5854823, 39.723109], 5);
// The function making the content of the popups called onEachFeature
function onEachFeature(feature, layer) {
var popupContent = "<p>State name so a Westerner can read it is: <em>" +
feature.properties.name + "<em>.</p>";
if (feature.properties) {
layer.bindPopup(popupContent);
}}
var markerLayer = L.geoJson(states, {
style:
function(feature){
switch(feature.properties.name){
case "North Ossetia": return{
color:"red"};
case "Chechnya": return{
color:"red"};
}}
,
onEachFeature: onEachFeature
}
).addTo(map);
</Script>
</Body>
</Html>
Display the source blob
Display the rendered blob
Raw
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