Displaying an interactive web map on my wordpress site


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="https://openrouteservice.org/"> OpenRouteService</a>, 
                to investigate the proportion of users who live within range of the site.


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


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


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

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

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.org/{z}/{x}/{y}.png', {
maxZoom: 18,  
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

// 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);



// 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 ("https://api.openrouteservice.org/v2/isochrones/foot-walking", drawIsochrone);

// add the info box to the map


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');
        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

// make a request to OpenRouteService for a walking distance isochrone, based on the input range of the html form
const url = "https://api.openrouteservice.org/v2/isochrones/foot-walking";

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

    // 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"}) + "'"



    // 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) {

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

        // zoom the map to fit the size of the isochrone     
Stuey17 2 months 0 Answers 9 views 0

Leave an answer