awesome-maps/scatterplot_layer.html at main · kathrynberger/awesome-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
62
63
64
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>pydeck</title>
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <script src='https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~8.5.*/dist/index.js'></script>
    <style>
    body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#deck-map-container {
  width: 100%;
  height: 100%;
  background-color: black;
}

#map {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}

#deckgl-overlay {
  z-index: 2;
  background: none;
}

#deck-map-wrapper {
  width: 100%;
  height: 100%;
}

#deck-container {
  width: 100vw;
  height: 100vh;
}
    </style>
  </head>
  <body>
    <div id="deck-container">
    </div>
  </body>
  <script>
    const jsonInput = {"initialViewState": {"bearing": 0, "latitude": 55.950558, "longitude": -3.185556, "pitch": 0, "zoom": 8}, "layers": [{"@@type": "ScatterplotLayer", "data": [{"Charge": "Free", "Facilities": "No additional services", "Opening times": "10.00am to 6.00pm ", "Toilet": "Colinton", "lat": 55.908196, "lon": -3.254014}, {"Charge": "Free", "Facilities": "No additional services", "Opening times": "10.00am to 6.00pm ", "Toilet": "Currie", "lat": 55.89592587758318, "lon": -3.310575485229492}, {"Charge": "Free", "Facilities": "No additional services", "Opening times": "10.00am to 6.00pm (Summer 8.00pm) ", "Toilet": "Hawes Pier", "lat": 55.990160437023526, "lon": -3.385913372039795}, {"Charge": "Free", "Facilities": "No additional services", "Opening times": "10.00am to 6.00pm ", "Toilet": "Juniper Green", "lat": 55.903418, "lon": -3.284995}, {"Charge": "Free", "Facilities": "No additional services", "Opening times": "10.00am to 8.00pm", "Toilet": "London Road", "lat": 55.95739301296125, "lon": -3.172903060913086}, {"Charge": "Free", "Facilities": "No additional services", "Opening times": "10.00am to 6.00pm ", "Toilet": "Middle Meadow Walk", "lat": 55.94465798313794, "lon": -3.1914424896240234}], "filled": true, "getFillColor": [255, 140, 0], "getLineColor": [0, 0, 0], "getPosition": "@@=location", "id": "a1bc5a6b-43b9-43ac-b9ae-a7db2430055d", "lineWidthMinPixels": 1, "opacity": 0.8, "pickable": true, "stroked": true}], "mapProvider": "carto", "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json", "mapboxKey": "", "views": [{"@@type": "MapView", "controller": true}]};
    const tooltip = {'text': '{name}\n{address}'};
    const customLibraries = null;

    const deckInstance = createDeck({
                  container: document.getElementById('deck-container'),
      jsonInput,
      tooltip,
      customLibraries
    });

  </script>
</html>