{"id":655,"date":"2013-06-09T18:36:01","date_gmt":"2013-06-09T18:36:01","guid":{"rendered":"http:\/\/globetrotterlife.org\/blog\/?page_id=655"},"modified":"2016-06-03T12:58:06","modified_gmt":"2016-06-03T12:58:06","slug":"mapsnippet","status":"publish","type":"page","link":"https:\/\/globetrotterlife.org\/blog\/mats-globetrotting-map\/mapsnippet\/","title":{"rendered":"mapsnippet"},"content":{"rendered":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' \/>\r\n  <script src='http:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.0.2\/mapbox.js'><\/script>\r\n  <link href='http:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.0.2\/mapbox.css' rel='stylesheet' \/>\r\n  <!--[if lte IE 8]>\r\n    <link href='http:\/\/api.tiles.mapbox.com\/mapbox.js\/v1.0.2\/mapbox.ie.css' rel='stylesheet' >\r\n  <![endif]-->\r\n  <style>\r\n    body { margin:0; padding:0; }\r\n    #map { position:absolute; top:0; bottom:0; width:100%; height:600px; }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<style>\r\n#map-ui {\r\n    position: absolute;\r\n    top: 75px;\r\n    left: 10px;\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    z-index: 100;\r\n}\r\n\r\n#map-ui a {\r\n    font: normal 13px\/18px 'Helvetica Neue', Helvetica, sans-serif;\r\n    background: rgba(255,255,255,0.5);\r\n    color: #3C4E5A;\r\n    display: block;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 1px solid #BBB;\r\n    border-bottom-width: 0;\r\n    min-width: 100px;\r\n    padding: 10px;\r\n    text-decoration: none;\r\n}\r\n\r\n#map-ui a:hover {\r\n    background: #ECF5FA;\r\n}\r\n\r\n#map-ui li:last-child a {\r\n    border-bottom-width: 1px;\r\n    -webkit-border-radius: 0 0 3px 3px;\r\n    border-radius: 0 0 3px 3px;\r\n}\r\n\r\n#map-ui li:first-child a {\r\n    -webkit-border-radius: 3px 3px 0 0;\r\n    border-radius: 3px 3px 0 0;\r\n}\r\n\r\n#map-ui a.active {\r\n    background: rgba(56,135,290,0.5);\r\n    border-color: #3887BE;\r\n    border-top-color: #FFF;\r\n    color: #000;\r\n}\r\n<\/style>\r\n<ul id='map-ui'><\/ul>\r\n<div id='map'><\/div>\r\n<script type='text\/javascript'>\r\n\r\n    \r\nvar map = L.map('map').setView([38.902, -77.001], 13);\r\nvar ui = document.getElementById('map-ui');\r\n\r\naddLayer(L.mapbox.tileLayer('examples.map-zgrqqx0w'), 'Base Map');\r\naddLayer(L.mapbox.tileLayer('examples.bike-locations'), 'Bike Stations');\r\naddLayer(L.mapbox.tileLayer('examples.bike-lanes'), 'Bike Lanes');\r\n\r\nfunction addLayer(layer, name) {\r\n    layer.addTo(map);\r\n\r\n    \/\/ Create a simple layer switcher that toggles layers on\r\n    \/\/ and off.\r\n    var item = document.createElement('li');\r\n    var link = document.createElement('a');\r\n\r\n    link.href = '#';\r\n    link.className = 'active';\r\n    link.innerHTML = name;\r\n\r\n    link.onclick = function(e) {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n\r\n        if (map.hasLayer(layer)) {\r\n            map.removeLayer(layer);\r\n            this.className = '';\r\n        } else {\r\n            map.addLayer(layer);\r\n            this.className = 'active';\r\n        }\r\n    };\r\n\r\n    item.appendChild(link);\r\n\r\n\t}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":249,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-655","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P2MMuc-az","_links":{"self":[{"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/pages\/655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/comments?post=655"}],"version-history":[{"count":3,"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/pages\/655\/revisions"}],"predecessor-version":[{"id":859,"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/pages\/655\/revisions\/859"}],"up":[{"embeddable":true,"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/pages\/249"}],"wp:attachment":[{"href":"https:\/\/globetrotterlife.org\/blog\/wp-json\/wp\/v2\/media?parent=655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}