Joga Letna

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Labels</title>
    
    <!-- Maplibre & deck.gl imports -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
  </head>

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

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

const data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "text": "Jóga Letná"
      },
      "geometry": {
        "coordinates": [14.425667115336287, 50.09922895244338],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "text": "Zemědělské muzeum"
      },
      "geometry": {
        "coordinates": [
          14.423414993831898,
          50.097087744788865
        ],
        "type": "Point"
      }
    }
  ]
}

const deckgl = new deck.DeckGL({
  // Basemap style
  container: 'map',
  // Can also use 'positron', 'dark-matter' instead of voyager
  mapStyle: "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",

  // Initial map location
  initialViewState: {
    latitude: 50.09922895244338,
    longitude: 14.425667115336287,
    zoom: 13
  },
  controller: true,

  // Visualization overlay
  layers: [
    new deck.GeoJsonLayer({
      data: data,
      pointType: 'circle+text',
      textCharacterSet: "Jóga Letná Zemědělské muzeum",
      getTextPixelOffset: [10, 0],
      getTextAnchor: 'start',
      getTextSize: 12,
      pointRadiusMinPixels: 5
    })
  ]
});