|
1 | 1 | <html>
|
2 | 2 | <head>
|
3 |
| - <link rel=" stylesheet" href=" https://unpkg.com/[email protected]/dist/leaflet.css" |
4 |
| - integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" |
5 |
| - crossorigin=""/> |
6 |
| - <script src=" https://unpkg.com/[email protected]/dist/leaflet.js" |
7 |
| - integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" |
8 |
| - crossorigin=""></script> |
| 3 | + <link rel=" stylesheet" href=" https://unpkg.com/[email protected]/dist/leaflet.css" /> |
| 4 | + <script src=" https://unpkg.com/[email protected]/dist/leaflet.js" ></script> |
9 | 5 |
|
10 | 6 | <style>
|
11 | 7 | #mmGeoJsonMap {
|
|
20 | 16 | <div id="mmGeoJsonMap"></div>
|
21 | 17 | <script>
|
22 | 18 | async function buildMap(url) {
|
23 |
| - let response = await fetch(url); |
24 |
| - const json = await response.json(); |
25 |
| - const geoJson = json; |
26 |
| - var mapStyle = { |
| 19 | + let response = await fetch(url); |
| 20 | + const json = await response.json(); |
| 21 | + const geoJson = json; |
| 22 | + var mapStyle = { |
27 | 23 | fillColor:"#fff",
|
28 | 24 | color:"#000",
|
29 | 25 | weight:'1',
|
30 |
| - fillOpacity:1 |
31 |
| - }; |
32 |
| - var mapCenter = [21.23750038304331, 95.80412357008937]; |
33 |
| - var zoom = 5; |
34 |
| - var basicMap = L.map('mmGeoJsonMap').setView(mapCenter,zoom); |
35 |
| - var jsonLayer = L.geoJSON(geoJson,{style:mapStyle}).addTo(basicMap); |
| 26 | + fillOpacity: 0.75 |
| 27 | + }; |
| 28 | + var mapCenter = [21.23750038304331, 95.80412357008937]; |
| 29 | + var mapZoom = 5; |
| 30 | + var basicMap = new L.Map('mmGeoJsonMap', { |
| 31 | + layers: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'), |
| 32 | + center: L.latLng(mapCenter), |
| 33 | + zoom: mapZoom, |
| 34 | + minZoom: 17, |
| 35 | + maxZoom: 25 |
| 36 | + }); |
| 37 | + var jsonLayer = L.geoJSON(geoJson,{style:mapStyle}).addTo(basicMap); |
| 38 | + //var jsonLayer = L.geoJSON(geoJson).addTo(basicMap); |
| 39 | + //var map = L.map('mmGeoJsonMap').setView([51.505, -0.09], 13); |
| 40 | + |
36 | 41 | }
|
37 | 42 | var url = 'https://raw.githubusercontent.com/laravel-stack/laravel-geo-json-myanmar/main/dist/geojson/townships.geojson';
|
38 | 43 | buildMap(url);
|
|
0 commit comments