Débuter avec les solutions Woosmap Store Locator

Un Store Locator affiche des magasins sur une carte et permet aux utilisateurs d'un site web ou d'une application de trouver le point de vente le plus proche et le plus pratique. Il permet aussi d'afficher des informations associées : adresse, horaires d'ouverture, coordonnées de contact, équipements et services disponibles. Woosmap propose deux façons d'intégrer un Store Locator dans votre application ou site web : le Woosmap Store Locator Widget ou la Woosmap Store Locator JS API. Nous vous aidons à choisir la solution adaptée à vos besoins.

Woosmap Store Locator Widget

Le Woosmap Store Locator Widget est une solution clé en main pour créer un Store Locator basé sur l'API Google Maps (ou Baidu Maps). C'est le moyen le plus rapide de proposer à vos utilisateurs un localisateur de magasins performant. Pour correspondre à vos préférences et à l'identité graphique de votre site, toutes les propriétés du Widget sont personnalisables côté client grâce à la méthode setConf().

Exemple

Benefits

• Easy to Configure: change theme color, marker styles, map languages, metrics units and more with just a couple of Javascript lines.
• Natively responsive layout based on your window width breakpoint.
• Labels support different languages.
• Bunch of prebuilt features such as Autocomplete Search, Driving Direction, Distance Matrix,...
• Easy to filter your stores using Custom Queries.
• Fast to deploy and easy to maintain (source code of the widget is hosted by us)

To Be Considered

• Style is not fully customisable as you don't have access to CSS ClassNames and icons are inline svg.
• Tracking users interaction with an analytics tools (Google Analytics for example), is limited to existing HANDLED_EVENT properties list
• Possible styles collision with your own styles.
• Less flexibility for new features.

Woosmap Store Locator Widget with Custom Renderer

The side panel used to display detailed information for the nearby stores or a selected store is fully customizable. You might consider this option as an alternative to the Store Locator Widget without custom rendering as you’ll need familiarity with front-end development concepts.

Example

Benefits

• Customize stores information rendering: set your own style and display desired information for both summary renderer (list of nearby stores) and detailed renderer (selected store) in the side panel. See how.
• Greater ability to record how the user is using your Store Locator
• Same pros than the Widget without custom renderer

To Be Considered

• A bit longer and timeconsuming development
• Same cons than the Widget without custom renderer

Woosmap Map JS API

• The Woosmap Map JS API is a client-side JavaScript library for building web maps and web applications. The API features a new worldwide basemap dynamically rendered on the client using WebGL by combining vector tiles with style rules. On top of this vector-based background map, the API offers an overlay layer dedicated to display your assets and helper classes to ease the integration of others Woosmap Services like Routing or Search.

Example

Benefits

• Full control over UI/UX.
• Lots of samples to help you getting started with this API.
• More flexible to add new features as you remain owner of the source code.
• Tracking user interaction limited only to your ideas and creativity.
• Native Mobile SDK available.
• TypeScript definition available

To Be Considered

• Longer and more complex development (and therefore timeconsuming).
• You'll need to host the integration source code on your side.

Decision Matrix

First of all, our Customer Care team is here to help you make the right choice and make sure the job is done right. So please don’t hesitate to reach out to us.

To decide which option is best for you (using the Widget or developing with the JS API), you could write a small decision matrix. There are some tips that may helps you:

• Invite the right people to work beside your core team for the exercise (this might include people who know the background, people of the implementation team, etc.).
• Write the three options, standard widget, widget with custom renderer and JS API, as headings for the rows of your decision matrix table.
• Consider the factors or criteria which will guide your decision: implementation cost, time to implement, impact on customer satisfaction, maintenance cost. Write these as headings for the columns of the table.
• If you want, give each decision factor a weighting.
• For each idea, assign a value on a fixed scale (0 to 5 is good) for each factor. Multiply the value by the appropriate weighting and write it in the box.
• Continue for all ideas. Write total values for each idea in the last column.

L'implémentation offrant la valeur totale la plus élevée est celle à considérer en priorité. Tout dépend de vos priorités. Nous sommes toujours disponibles pour vous aider sur des questions de code ou autres ! Si vous souhaitez partager votre choix, n'hésitez pas à nous contacter.