maps/municipalities.html at master · OpenDataDE/maps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
<head>
  <meta charset=utf-8 />
  <title>Municipalities -- An Open Data Delaware Project</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
  crossorigin=""></script>


  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"
  integrity="sha512-m+BZ3OSlzGdYLqUBZt3u6eA0sH+Txdmq7cqA1u8/B2aTXviGMMLOfrKyiIW7181jbzZAY0u+3jWoiL61iLcTKQ=="
  crossorigin=""></script>

  <script src="https://js.arcgis.com/4.7/"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<div id="map"></div>

<script>
  const url = 'https://firstmap.delaware.gov/arcgis/rest/services/Boundaries/DE_Municipalities/MapServer/0'

  // set the map to the center of Delaware at zoom level 9
  const map = L.map("map").setView([39.144974,-75.947085], 9);

  L.esri.basemapLayer('Topographic').addTo(map);

  const municipalities = L.esri.featureLayer({
    url: url,
    style: { color: 'gray', weight: 1 }
  }).addTo(map);

  municipalities.bindPopup(layer => {
    const properties = layer.feature.properties

    const lines = [
      '<b>{NAME}</b>',
      'Population (2010): {POP_2010}',
      `Area: ${parseInt(properties.ACRES)} acres`,
      'Website: {WEBSITE}'
    ]

    return L.Util.template(lines.join('<BR>'), properties)
  })

</script>

</body>
</html>