D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
bsuthersan
Full window
Github gist
Tamworth finder
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <head> <title>Welcome to the Zone</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> </head> <style> #mapid {height: 500px; width= 500px, margin-top: 100px} </style> <body> <div id="mapid"></div> <script> var mymap = L.map('mapid'). setView([51.5080, -0.1281], 2); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoiYnN1dGhlcnNhbiIsImEiOiJjajZuam42bGowODFtMnJxc200NHF2MmdmIn0.Uwf-3ridcbtiMFdYIWMNNw' }).addTo(mymap); mymap.on('click', function(x) { mymap.flyTo([-31.0927, 150.9320], 14.7, {animate: true, duration: 3}) }); </script> </body>