Embedded map customization?

Is there a way to customize the appearance or even the pins on the embedded map? The documentation is a bit sparse in that regard.

Hi, no the current embedded map is not very customisable - you can filter on network operator, specify a start latitude/longitude:

You can alternatively you can use the whole app and change the branding - ideally that would be done through config (and associated code change Pull Requests) rather than having a custom version to maintain.

Were there particular things that you would like/need to customise for your use case?

I’m thinking if we had a list of typical things to customise we could listen for a Window.postMessage message from the parent and receive a configuration object with marker img paths etc. Some things are limited depending on what Mapbox-gl can easily do (our current map provider).


Thanks for the reply. I tried kicking on the Ionic web app but it’s not my normal stack and ran into some missing configuration issues. I’m working on a project that calls for a map of local charging stations and what you’ve put together here is perfect, except for the styling.

I need to customize coloring for a darker map and customize the markers. I think those two are going to be typical for the embed.

Can I also recommend adding a section laying out the full installation and configuration of the web app in the documentation?


1 Like

Thanks, yes the app is quite complex in places and it does help a lot if you’ve used Ionic/Angular/TypeScript recently, that said the default code (which is a work in progress) wasn’t building because some config was missing.

I’ve updated the README (https://github.com/openchargemap/ocm-app) and the default config, all you need to do is clone and configure the latest version of the code and provide a mapbox API key in the environment.ts files.

Happy to try to answer random questions on getting the build running.

Regarding customization the options are to extend the app to support more customization or modify the app and create a custom build.

  • For the first option I think I like the idea of using postMessage to tell the app what config to use, rather than passing it on the URL but I don’t know).
  • For the custom build option you would modify /services/mapping/providers/MapBox.ts initMap method to provide alternative map style config. You could also modify /core/Utils.ts getIconForPOI in order to specify completely different marker icons (or even provide different marker icon logic).