Skip to content

Latest commit

 

History

History
157 lines (123 loc) · 4.05 KB

TUTORIAL.md

File metadata and controls

157 lines (123 loc) · 4.05 KB

Sample Web App Tutorial

The tutorial starts with base.html file in this folder. The code is also available on StackBlitz:

web app source code

Use map and vector tiles prepared in the workshop.

Remove geoJSON fetch.

  fetch(
    'https://api.maptiler.com/data/a9243a93-a4d3-4a6d-a8a1-d00a78a88985/features.json?key=<your-API-key>'
  ).then((res) => {
    res.json().then((geojson) => {
      // add markers to map
      for (const { geometry, properties } of geojson.features) {
        // make a marker for each feature and add to the map
        new maplibregl.Marker().setLngLat(geometry.coordinates).addTo(map);
      }
    });
  });

⚠️ Expired API key: This API key was generated just for workshop purpose. Get your own at https://cloud.maptiler.com

Change the style URL

style: 'https://api.maptiler.com/maps/b4a5f12e-9aea-4742-b767-19557ff5d0d2/style.json?key=<your-API-key>'

⚠️ Expired API key: This API key was generated just for workshop purpose. Get your own at https://cloud.maptiler.com

Display POI attributes

Create function for displaying popup

var popup;

var addPopup = function (e) {

}

Remove previous popup (if any)

popup?.remove();

Add code for displaying popup window

    var content = '<h1>Hellow World!</h1>'
    var opts = {
        maxWidth: 'none'
    };
    popup = new maplibregl.Popup(opts)
        .setLngLat(e.lngLat)
        .setHTML(content)
        .addTo(map);

Add event handlers

    // Bike sharing places
    map.on('click', 'bike-sharing-label', (e) => {
        addPopup(e);
    });

    // Bike shops
    map.on('click', 'bike-shop-label', (e) => {
        addPopup(e);
    });

Pass in parameters to popup function

    var addPopup = function (e, label, image) {
    }

tweak content

  var content = `<h1>Hellow World!</h1>
    <img src="https://labs.maptiler.com/foss4g-workshop/block-4/${image}" />
    <h4>${label}</h4>
  `;
    // Bike sharing places
    map.on('click', 'bike-sharing-label', (e) => {
        addPopup(e, 'Bike Sharing Place', 'bicycle.jpg');
    });

    // Bike shops
    map.on('click', 'bike-shop-label', (e) => {
        addPopup(e, 'Bike Shop', 'shop.jpg');
    });

Style the window - add bootstrap

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Add card control

var content = `<div class="card" style="width: 14rem;">
        <img src="https://labs.maptiler.com/foss4g-workshop/block-4/${image}" class="card-img-top" alt="bicycle">
        <div class="card-body">
            <h4>${label}</h4>
        </div>
    </div>`

Query GeoJSON attributes

var feature = e.features[0];
if (feature && feature.properties) {
    var name = feature.properties['name'] || 'unknown';
    var hours = feature.properties['hours'] || 'unknown';
    var distance = feature.properties['distance'];

    var content = `<div class="card" style="width: 14rem;">
            <img src="https://labs.maptiler.com/foss4g-workshop/block-4/${image}" class="card-img-top" alt="bicycle">
            <div class="card-body">
                <h5 class="card-title">${name}</h5>
                <p class="fw-bold">${label}</p>
                <p class="card-text">${hours}</p>
                <p class="fw-lighter">Distance from cycleway: ${distance} m</p>
            </div>
        </div>`

        var opts = {
            maxWidth: 'none'
        };
        popup = new maplibregl.Popup(opts)
            .setLngLat(e.lngLat)
            .setHTML(content)
            .addTo(map);
    }
}