A Leaflet.js map created with Folium using both GeoJSON and TopoJSON. The map was generated with the following Python code:
geo_path = r'data/antarctic_ice_edge.json'
topo_path = r'data/antarctic_ice_shelf_topo.json'
ice_map = folium.Map(location=[-59.1759, -11.6016],
tiles='Mapbox Bright', zoom_start=2)
ice_map.geo_json(geo_path=geo_path)
ice_map.geo_json(geo_path=topo_path, topojson='objects.antarctic_ice_shelf')
ice_map.create_map()| import folium | |
| geo_path = r'data/antarctic_ice_edge.json' | |
| topo_path = r'data/antarctic_ice_shelf_topo.json' | |
| ice_map = folium.Map(location=[-59.1759, -11.6016], | |
| tiles='Mapbox Bright', zoom_start=2) | |
| ice_map.geo_json(geo_path=geo_path) | |
| ice_map.geo_json(geo_path=topo_path, topojson='objects.antarctic_ice_shelf') | |
| ice_map.create_map() |
| <!DOCTYPE html> | |
| <head> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" /> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <style> | |
| .legend { | |
| padding: 0px 0px; | |
| font: 10px sans-serif; | |
| background: white; | |
| background: rgba(255,255,255,0.8); | |
| box-shadow: 0 0 15px rgba(0,0,0,0.2); | |
| border-radius: 5px; | |
| } | |
| .key path { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 960px; height: 500px"></div> | |
| <script> | |
| queue() | |
| .defer(d3.json, 'data/antarctic_ice_edge.json') | |
| .defer(d3.json, 'data/antarctic_ice_shelf_topo.json') | |
| .await(makeMap) | |
| function makeMap(error, gjson_1,tjson_2) { | |
| topo_2 = topojson.feature(tjson_2, tjson_2.objects.antarctic_ice_shelf); | |
| function matchKey(datapoint, key_variable){ | |
| return(parseFloat(key_variable[0][datapoint])); | |
| }; | |
| var map = L.map('map').setView([-59.1759, -11.6016], 2); | |
| L.tileLayer('http://{s}.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png', { | |
| maxZoom: 18, | |
| attribution: 'Map tiles by <a href="http://www.mapbox.com/m">Mapbox</a> Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.' | |
| }).addTo(map); | |
| function style_1(feature) { | |
| return { | |
| fillColor: 'blue', | |
| weight: 1, | |
| opacity: 1, | |
| color: 'black', | |
| fillOpacity: 0.6 | |
| }; | |
| } | |
| function style_2(feature) { | |
| return { | |
| fillColor: 'blue', | |
| weight: 1, | |
| opacity: 1, | |
| color: 'black', | |
| fillOpacity: 0.6 | |
| }; | |
| } | |
| gJson_layer_1 = L.geoJson(gjson_1, {style: style_1}).addTo(map) | |
| gJson_layer_2 = L.geoJson(topo_2, {style: style_2}).addTo(map) | |
| }; | |
| </script> | |
| </body> |
