admin管理员组

文章数量:1328002

I created an interactive web map using Javascript, and want to display it on my Wordpress site. I am currently displaying it on a browser webpage.

Things to note, the map uses data from a .csv file stored locally. This is my main issue as I'm unsure where/ how to store this data in order to display it on my website. The script also calls to openrouteservice API in order to generate isochrones.

Can I use the shortcodes feature to display the map?

Here is the HTML I used to create the webpage.

<body style="margin-left:100px;margin-right:100px" class="w3-rest"> 

<!-- A call to the function that initialises the maps when the page is loaded -->
           <body onload="initIsochronesMap();"></body>  
           
           <div class= "w3-cell w3-cell-middle">

            <h1 class="w3-text-orange" style= "text-align: left;">ABOUT THE ANALYSIS </h1>
            <p style="text-align: left;">
                Walking is a key mode of transport for foodbank clients accessing the service.
                Use the tool below, powered by <a href="/"> OpenRouteService</a>, 
                to investigate the proportion of users who live within range of the site.
                
            </p>

            </div>

        <!-- A division to hold the map -->
        <div class="w3-card-4, w3-rest w3-border w3-round-large w3-border-orange"
        style="margin-left:200px;margin-right:200px;">
    
        <div style="width:100%;height:400px;" id="map2" class="w3-container"> </div>

        </div>

            <!-- create a div to hold the input form and the button that submits it -->
            <div class="w3-display-container"

                style="height:75px;margin-left:400px;margin-right:400px;">

                <form id="timeform" class="w3-container w3-display-left">
                RANGE IN MINUTES <input id="time" type="number" size="20" name="time">
                </form>

                <button onclick ="isoParams()" class="w3-container w3-display-right"
                
                > GENERATE </button>
            </div>
</body>

Here is the code for my map.

let isochroneLayer, isoinfo, clientsTurf;

// Initialise the base map
function initIsochronesMap() {

// variable that holds the second map
map2 = L.map('map2');
    
// Centre the map on Manchester Central Foodbank
map2.setView(L.latLng(53.464774, -2.23179) ,12);

// this is a variable that holds a reference the tiles that will be used for the basemap
// I imported this map from leaflet provider
baseMap2 = L.tileLayer('https://{s}.tile.openstreetmap/{z}/{x}/{y}.png', {
maxZoom: 18,  
attribution: '&copy; <a href=";>OpenStreetMap</a> contributors'
}).addTo(map2);

// add a marker to the map at Manchester Central Foodbank
L.marker([53.464774, -2.23179]).bindPopup("Manchester Central Foodbank").addTo(map2);
}


// function to convert CSV coordinates to a turf points collection
d3.csv("./Coordinates.csv", function (Cdata) {

    // d3 parses CSV file, and creates Cdata as an array of objects
    // use .map to convert this into an array of arrays (turf constructor preffered format)     
    var dataArray = Cdata.map( Object.values );

    // pass the results to turf point constructor
    // define clientsTurf in the global scope, as it will also be used for the isochrone map
    clientsTurf = turf.points(dataArray);

    console.log(clientsTurf);

    });



// This function is triggered by the submission of the html form, and passes the inputs to the request function
function isoParams() {

// Get the time input from the html input form
timeInput = document.getElementById("time").value * 60;
 
// call to get geoJson data from ORS
walkIsochrone (";, drawIsochrone);

// add the info box to the map
isochroneInfoBox();

}


function isochroneInfoBox(){

    // create a Leaflet control (generic term for anything you add to the map)
    isoinfo = L.control();

    // create the info box to update with the percentage of points falling within the isochrone range
    isoinfo.onAdd = function (map2) {
        this._div = L.DomUtil.create('div', 'isoinfo');
        this.update();
        return this._div;
    };

    // create a function called update() that updates the contents of the info box
    isoinfo.update = function (value) {
            
            this._div.innerHTML = value;
    
    };

    // add the info window to the map
    isoinfo.addTo(map2);
    
    } 


// make a request to OpenRouteService for a walking distance isochrone, based on the input range of the html form
const url = ";;

function walkIsochrone (url, drawIsochrone) {

let request = new XMLHttpRequest();
 
  request.open('POST', url);
 
  request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');
  request.setRequestHeader('Content-Type', 'application/json');
  request.setRequestHeader('Authorization', '5b3ce3597851110001cf624863085b996464465cbf0974fe690fc4ef');
 
    //set an event listener for when the HTTP state changes
    request.onreadystatechange = function () {

        //a successful HTTP request returns a state of DONE and a status of 200
        if (request.readyState === 4 && request.status === 200) {

            // pass the response to the callback function
            drawIsochrone(JSON.parse(request.responseText));  
      }
    };
  

    // set the input as a variable, in order to change it dynamically from the input form
    // then convert it to the required format for OpenRouteService before sending
    const changingInput = JSON.stringify({"locations":[[-2.23179,53.464774],[-2.23185,53.464780]],"range":[timeInput],"range_type":"time"}) + "'"

    request.send(changingInput);

    }; 

    // function that adds the isochrone to the map
    function drawIsochrone (data) {
        
        // count the number of points within the generated isochrone
            let pointsWithinIsochrone;
            for (let y = 0; y < data.features.length; y++) {
            
        pointsWithinIsochrone = turf.pointsWithinPolygon(clientsTurf, data.features[y]);
        
                }

      // create a variable that will be loaded in the info box
      pointsOutput = pointsWithinIsochrone.features.length / 1519 * 100
      percentageWithin = (Math.round(pointsOutput * 100) / 100).toFixed(2);
  
      //update the info box
      isoinfo.update("<b>" + percentageWithin + "% OF FOODBANK USERS ARE WITHIN " + timeInput / 60  + " MINUTES RANGE </b>");
                
      // if there is a layer already added to the map then remove it
      if (isochroneLayer) {
         map2.removeLayer(isochroneLayer);
    
    };

        // load the isochrone into GeoJson and style
        isochroneLayer = L.geoJson(data, { 
              style: {
              weight: 4,
              opacity: 1,
              color: 'orange',
              }
        }).addTo(map2);   

        // zoom the map to fit the size of the isochrone     
        map2.fitBounds(isochroneLayer.getBounds());
      
}

本文标签： shortcodeDisplaying an interactive web map on my wordpress site

版权声明：本文标题：shortcode - Displaying an interactive web map on my wordpress site 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741985878a2408673.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。