<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Leaflet Demo</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"/> </head> <body> <div id="map"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> </body> </html>
$.getJSON('//jsbin.com/qogati/1.js', renderMap); function renderMap (geoData) { var map = L.map('map'); var osm = '//{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png'; L.tileLayer(osm).addTo(map); var geoJson = L.geoJson(geoData, { style: function (feature) { return { weight: 1, opacity: 0.5, color: '#00ff00', fillColor: '#00dd00', fillOpacity: 0.2 } } }).addTo(map); map.fitBounds(geoJson.getBounds()); }