Skip to main content

How to Use MapSDK v2.0

Contextual maps, advanced filters, and react integration

Sjoerd Kortekaas avatar
Written by Sjoerd Kortekaas
Updated over 3 weeks ago

The MapSDK v2.0 is designed to help you create personalized and high-performing map experiences for your customers. Find a breakdown of the feature below.

Set your map context

You can now configure the map to display a specific set of stations based on your business model. This ensures your drivers only see stations relevant to them.

  • For Mobility Service Providers (MSPs): Your map can be configured to display all stations your drivers can access, including your complete roaming network.

  • For Charge Point Operators (CPOs): Your map can be set up to display only your own branded charge stations. You can further specify if this should include only public stations, or a mix of public and private charging stations.

Advanced filtering

We've added a set of filters that you can choose to enable or disable for your customers:

  • Filter by operator: Let drivers find stations owned by specific operators across the network (e.g., "Show all FastNed stations").

  • Filter by public/private: Give users the option to switch between publicly accessible and private charging locations.

  • Filter by fees: A simple toggle to show only locations that do not charge additional session fees.

  • Filter by "Operator only": A dedicated filter that restricts the map view to only your own branded stations.

React component

Traditionally, our MapSDK allowed customers to easily embed a map using a simple widget.

With v2.0, we have developed this further by extracting the map logic into a react component. This opens up new possibilities for our more technical users, offering:

  • Native integration: Import and use the map directly within your React applications.

  • Improved developer experience: Manage and customize maps using familiar React patterns instead of dealing with embed scripts.

  • Granular control: Programmatically manage the map's positioning, configuration, and styling.

  • Composable architecture: Seamlessly integrate the map component with your other UI components and business logic.

  • Better performance: Tighter integration reduces the overhead associated with traditional iframe-based embeds.

  • Future extensibility: This new component paves the way for additional React-based SDK enhancements.

FAQ

What's the main difference between the old widget and the new React component?

The fundamental difference is the level of integration and control:

  • Traditional widget: This is an easy-to-embed map (like an iframe) perfect for simple marketing pages where minimal configuration is needed.

  • New React Component: This is a native component that integrates directly into your existing React application. This provides granular programmatic control, better performance, and allows you to manage the map using familiar React patterns (like state and props).

Can I control which new filters my users see?

Yes. Both the new React component and the traditional widget allow you to enable or disable any of the new filters to best fit your specific use case. The new filters are:

  • Operator

  • Public/Private

  • No Fees

  • Operator Only

What if I'm an MSP? What map will my users see?

As a Mobility Service Provider (MSP), you can now configure the map to show your full roaming network. This provides your drivers with a complete and accurate view of all stations they can access.

What if I'm a CPO?

As a Charge Point Operator (CPO), you have full control:

  1. You can configure the map to show only your own branded stations.

  2. You can then further choose to display only your public stations (e.g., for your main website) or a combination of public and private stations (e.g., for an internal operational tool).

Did this answer your question?