Skip to main content

Add polygons & polylines

1. Create your empty map on pro.getwemap.com and get your emmid & token​

image

2. Add snippet to your website​

Include CSS rules and JavaScript library on top of your HTML file.

<style>
    body, html{ height: 100%; }
</style>
<script type='application/javascript' src='https://livemap.getwemap.com/js/sdk.min.js'></script>

Include the following code in the <body> of your HTML file.

<div id='map-container' style='width: 100%; height: 100%;'></div>

3. Create geoentities pinpoints and map​

Nexts steps are:

  • Create map
  • Create your Geoentities Pinpoints from data
  • Fit map to your Geoentities Pinpoints bounds
<!-- import all turf librairy or create custom build: https://turfjs.org/getting-started -->
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
<script>
    // Create your map
    const container = document.getElementById('map-container');
    const options = {
        emmid: 19158,
      token: 'GUHTU6TYAWWQHUSR5Z5JZNMXX'
    };
    const livemap = wemap.v1.createLivemap(container, options);

    // Create Geoentities Pinpoints from geojson

  const geojsonToGeoentitiesPinpoints = (featuresCollection) => {
    const features = featuresCollection.features.filter(feat => {
        return ['Linestring', 'Polygon'].includes(feat.geometry.type);
    });
    const pinpoints = features.map((feat, id) => {
      const centroid = turf.centroid(feat);
      return {
        id,
        name: feat.properties.name,
        latitude: centroid.geometry.coordinates[1],
        longitude: centroid.geometry.coordinates[0],
        description: feat.properties.description,
        geo_entity_shape: feat
      };
    });
    return pinpoints;
  };

  let bbox;

  // Don't forget to use the waitForReady function
  // If you don't you could have some issue with the map handling functions like fitBounds
  livemap.waitForReady().then(function() {
    fetch('https://gist.githubusercontent.com/bertrandmd/99656cbee2c6b81607cce3243137cf35/raw/74aae01eb4ee84a5d96db7139a7c6275371dd150/example.geojson')
    .then(resp => resp.json())
    .then(data => {
        const pinpoints = geojsonToGeoentitiesPinpoints(data);
        bbox = turf.bbox(data);
  
        // Add your Pinpoint to the map
        return livemap.setPinpoints(pinpoints);         
    })
    .then(response => {
       const options = {
           padding: {bottom: 0, top: 65, left: 0, right:0}
       }
       livemap.fitBounds(bbox, options);
    });
  });
</script>

4. Et voilà !​