Built with blockbuilder.org
Last active
October 13, 2018 12:00
-
-
Save Hirosaji/aca667d8d7c523017c330cb2d8b6d251 to your computer and use it in GitHub Desktop.
Leaflet.js - Simple Map
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Leaflet.js - Simple Map | |
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| #mapid { height: 700px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="mapid"></div> | |
| <script> | |
| d3.json("ken.geojson", function(json) { | |
| var initLatLng = [38, 135]; | |
| var map = L.map('mapid', {maxZoom: 10, minZoom: 5}).setView(initLatLng, 5); | |
| var cityBounds = [[50, 112], [25, 158]]; | |
| var cityRect = L.rectangle(cityBounds, {fillOpacity: 0, weight: 0}); | |
| cityRect.addTo(map); | |
| map.setMaxBounds(cityBounds); | |
| var baseLayer = L.geoJson(json, { | |
| style: { | |
| weight: 2, | |
| opacity: 1, | |
| color: 'white', | |
| fillOpacity: 0.7 | |
| } | |
| }).addTo(map); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment