The journals that we host, deal with urban design and spatial planning a lot. So far we have added maps as images in HTML articles. We are not satisfied with this, because a jpg file or a png file is static, whereas the original information was dynamic.
LeafletJS is a versatile javascript that can provide the services that we need. Our first trials are promising. A leaflet map consists typically out of a tile layer and one or more external files. We have placed the LeafletJS files in the OJS themes folder. Scripts are loaded using the header of the HTML file.
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="/ojs/plugins/themes/default/leaflet/leaflet.css"/>
<script src="/ojs/plugins/themes/default/leaflet/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></head>
<body>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100vw;
}
</style>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([52.0116, 4.3571], 13);
// load a tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// load GeoJSON from an external file
$.getJSON("http://XXX.XX.XXX.XXX/ojs/index.php/geotest/article/view/2/7",function(data){
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>
The tile-layer works fine. But the external geojson-file is not recognised when it is uploaded as an ‘article component’ (OJS) or ‘dependent file’ (OMP). It creates a “Failed to load resource: the server responded with a status of 404 (Not Found)”.
When the geojson-file is uploaded as a separate galley and when the URL of that file is used in the coding then (like above) then things do work. As a proof-of-concept OJS (or OMP) seem able to work well with LeafletJS.
Currently OJS offers the option to upload multimedia, image and HTML stylesheet as article components. Would it be possible to add geo-files like geojson or shape-files as additional components that are recognised by OJS (and OMP)?