admin管理员组文章数量:1315952
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: '© <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, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论