Javascript Map Improvements and Ideas Javascript Map Improvements and Ideas

January 19, 2022

londinium openstreetmap

I have lots of ideas and improvements I would like to make to the londinium.com website. Here I am going to document a few with brief outlines and potential solutions

1. Loading data from api - info box - show progress/errors

2. Show a list of the data below the map

I am about to upload a new feature for the area pages, where the page shows a table of results with websites nearest the centre point of the map. Perhaps this could be created dynamically from the live overpass data.

3. Different colours for different features on the map

This map uses OpenLayers, but displays the different sort of features with different colours.

4. Location - set a location page and use this with cookies.

Create a page to set the location. Here are a few links to examples of geolocation using html5

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation

https://www.tutorialspoint.com/How-to-use-HTML5-Geolocation-Latitude-Longitude-API

5. Map to show all of a brand name, eg, waitrose, lidl

This is the Overpass API Query to get all Waitroses in the BBOX area.

[out:json][timeout:25];
(
  // query part for: “shop=* and name=Waitrose
  nwr["shop"]["name"="Waitrose"]({{bbox}});
  // query part for: “shop=* and brand=Waitrose
  nwr["shop"]["brand"="Waitrose"]({{bbox}});
  // query part for: “shop=* and operator=Waitrose
  nwr["shop"]["operator"="Waitrose"]({{bbox}});
);
// print results
out body;
>;
out skel qt;

6. Testing the json from the API is loading using Laravel Dusk.

  • Improving the tests to see if the api is working

7. Adding a Search facility for the maps to find features and places.

  • use Google Adsense
  • use a search like this blog using a json file.

8. Improving the map popup to deal with non-valid website links and adding more data fields.

This is just a vague idea, but at present, a url field will be linked, but there is a large number of urls without the http/https element, which makes it an internal link.


If you would like to contact me you can either use this form on londinium.com or via Twitter @andylondon