Adding Geo-files to a HTML-article

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: '&copy; <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)?

Hi @Franklinx,

Yes, that sounds like a good thing to add support for. I can’t walk you through it precisely, but I can point out where you’d need to tinker, and if we can come up with a decent changeset it would be good to get it merged for the next release.

There will be a few changes required:

  • Add support for OJS to consider JSON as “inlineable”, rather than served for download. (Download headers will likely cause problems with the AJAX request.) To adjust this, you’ll need to add the JSON mime type to plugins/generic/htmlArticleGalley/HtmlArticleGalleyPlugin.inc.php in the _getHTMLContents function:
    if ($embeddableFile->getFileType()=='text/plain' || $embeddableFile->getFileType()=='text/css') $params['inline']='true';
    
  • You’ll also need to add a rewrite pattern for your HTML. Currently src="...", href="...", data="...", and url="..." patterns are supported. I would suggest seeing if you can rewrite your markup to use one of those, since they’re more standard than hard-coding something like $.getJSON. That’s also in the same function mentioned above.

Regards,
Alec Smecher
Public Knowledge Project Team

Hi Alec, it took some time. Two issues here. When we upload a JSON file, then it is rewritten in OJS, and in this proces something happens by which its file type becomes a txt file. The Leaflet javascript doesn’t recognise it any more. It is kinda strange because a JSON file is a text file. How can we prevent the recognition problem?

By the way, TU Delft might be willing to do some serious work on this.