INBOX-MAP

by velo_ninja

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Display a map on a webpage</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 40px; width: 100%; }
        #addMarkerBtn { position: absolute; bottom: 0; width: 100%; background-color: #fff; padding: 10px; text-align: center; }
    </style>
</head>
<body onload="init();">
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibHJ0LWJsb2ciLCJhIjoiY2x0MWx6cXF4MTR5NTJpbzY2Y29ybDg4eCJ9.PG4a7I58dwERx2MAetgo';
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/streets-v11', // style URL
            center: [-98.5795, 39.8283], // center of the United States
            zoom: 3 // zoom level
        });

        function addMarker(longitude, latitude) {
            const marker = new mapboxgl.Marker()
                .setLngLat([longitude, latitude])
                .addTo(map);
        }
        
        function init () {console.log('Initialisation running...');     
          window.onmessage = (event) => {
            if (event.data) {
              let data = rawData;
            	setPointsOnMap(data)
              console.log("HTML Code Element received a message!");
              insertMessage(event.data);
            }
          }
        }
 
        function insertMessage(msg) {
          document.getElementById('demo').innerHTML = msg;
          sendReturnMessage("Map-Points setted!!!");
        }
        
        
        function setPointsOnMap(data) {
          rawData.forEach(coords => {
              addMarker(coords.longitude, coords.latitude);
          });
        }
  ...

JavaScript

//api-->bg