block by mpmckenna8 9556860

Mapbox.js w/ geojson layer of polygons w/ popups

Full Screen

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..

index.html

<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>