JSFiddle - React, Tailwind, and code Playground
HTML
<style>
body, html{ height: 100%; }
</style>
<!-- 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 type='application/javascript' src='https://livemap.getwemap.com/js/sdk.min.js'></script>
<div id='map-container' style='width: 100%; height: 100%;'></div>
<script>
// Create your map
const container = document.getElementById('map-container');
const options = {
emmid: 7439,
token: 'Y6TBX2RX7HUP21XCCMFNHM6AV'
};
const livemap = wemap.v1.createLivemap(container, options, false);
// 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;
livemap.waitForReady().then(function() {
fetch('https://gist.githubusercontent.com/bertrandmd/b8f2cce355f480294bd7efa55bf207fb/raw/27777040d8e3e006e9fb83612a33b1ea0938d1d4/demo_geipan_mtp.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>