Embedded map customization?

keyboard.ninja · November 12, 2019, 2:35pm

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.

Christopher · November 13, 2019, 12:21am

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

github.com

openchargemap/ocm-app/blob/master/src/app/services/AppManager.ts#L123


      );
      return decodedValues;
    }
  }
  return null;
}


/**
 * If any query string parameters passed in the URL, apply them here
 */
public applyURLQueryStringOptions() {


  if (this.getQueryVariable('mode')) {
    let mode = this.getQueryVariable('mode')[0];
    
    if (mode == 'embedded') {
      this.isEmbeddedMode = true;
    }
  }
  
  if (this.getQueryVariable('operatorid')) {

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.

Christopher · November 13, 2019, 2:37am

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).

keyboard.ninja · November 13, 2019, 2:02pm

Christopher,

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?

Thanks,
Adam

Christopher · November 14, 2019, 8:53am

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.

Christopher · November 14, 2019, 9:01am

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).