Interactive data layers with Wemap

Take your GeoJSON layers to the next level with Wemap

The Wemap platform now includes a native solution for the inclusion of GeoJSON data layers for any or all of your maps.

Looking to include multi-colored layers for your ‘reports of stolen cars’ map?

From the Wemap map creation interface, it’s easier than ever to add a GeoJSON data layer to your maps, the GeoJSON format being the current standard for the visualization of geo-data and their attributes.

To include a data layer, you’ll need to insure that it meets the following criteria:

• standard GeoJSON formatting
• weighs less than 2mb

There are number of widely available (and free) tools to help you build an acceptable GeoJSON file whether you need to reduce its size or convert it from another format, and we highly recommend http://mapshaper.org/

Screen capture of the map creation page and the ‘insert layer’ button

From the ‘map creation’ screen, click on the ‘insert layer’ button.

Depiction of the information necessary and options available for inserting GeoJSON layers

Upon successfully completing the ‘Insert Layer’ form, your map will automatically update to show an initial visualization of the data layers projected over your map.

This could use a little color, right?

Your GeoJSON layer is now visible but it’s rather boring, right? This is normal. Right now, it’s a simple expression of the data layer and standard interactions — highlight upon hover, zoom upon click, etc.

Thankfully, we’ve also made it easy to add some pizzaz to your data layers.

Style

Wemap uses ‘simple-style’ to power the customization of the objects that comprise the data layer. This enables you to add meta-data to each object (polygons or lines) of the data layer.

• fill — the color inside a polygon (RGB or HEX)
• fill-opacity — the density of the fill color inside a polygon (0.0–>1.0)
• stroke — the color of the exterior line of a polygon or line (RGB or HEX)
• stroke-opacity — the density of the color of the exterior line of a polygon or polyline (0.0->1.0)
• stroke-width — the thickness of the holding line of the polygon or polyline

Polygons :

Now, let’s walk through how to add colors to for each region as well as some generic parameters:

Looks better already, right?

To yield such a (colorful result), it’s a simple as adding style properties for each object. The style below was executed for the region around Bordeaux (southwest France).

"fill": "red",
"fill-opacity": 0.9,
"stroke": "white",
"stroke-opacity": 0.9,
"stroke-width": 1

Polylines :

Adding polylines is also easy-to-do through the Wemap map creation engine.

A polylines data layer representing stages of the Tour de France 2017

To insure that your polylines data layer is properly formatted, it’s necessary to add the following style parameters to each object :

"fill-opacity": 0,
"stroke": "#BC1F12",
"stroke-width": 4

The stroke and stroke-width parameters allow you to set the colors and width in pixels of the polyline. Setting fill-opacity to 0 enables you to avoid the creation of a ‘false’ polygon in place of your intended polyline.

💡 Helpful Hint — ‘Simple-style’ gives you the freedom to use any hexadecimal color (ex: #ffffff= white), opening up a world of colorful possibilities for your maps.

Interactions

By default, the data layers are set as follows :

• visible between zoom levels 2 →18
• highlight upon hover
• zoom upon click

That being said, you have the ability to customize the behavior of your data layers directly in the data layer insertion menu.

Visibility :

Select the desired level of minzoom (highest level at which a data layer is visible) and maxzoom(lowest lever at which a data layer is visible) for each layer in order to set its visibility upon the opening of the map.

💡 Helpful Hint — using different visibility settings for different data layers can help with the in-map navigation (eg: continent level data layers are visibile at certain levels of zoom whereas country level data layers are not visible at the same time as continents but ‘appear’ as the user zooms in).

Hover :

The default behavoir upon hover is for the data layer to be higlighted (highlight)but you can deactivate this feature by modifying the onhover to ignore.

💡 Helpful Hint — to get the most of out the hover feature, make sure that every object contains a unique id.

Click :

The default onclickaction is to zoom into the geographic center of the selected data layer. However, you can modify this behavoir to suit your editorial needs by switchingonclick to ignore, or, if you’d like to have additional information appear, popupwill trigger a the appearance of a popup over your map.

The popup enables you to open an HTML template that is tied to a specific geoJSON object.

For each object, you can add a template_datafield that contains the information to appear in the popup.

For example, template-data for the ‘Departement du Puy-de-Dome’ object contains the following specifications:

"template_data": {
    "name": "Puy-de-Dôme",
    "tauxVol": 2.85,
    "totalVol": 1857,
    "nombreVoiture": 1384,
    "nombre2roues": 473
}

Once each the supplemental data for each object has been inputted, the only remaining step is to define the HTML ‘template’ itself, that is to say the format in which the underlying data will be displayed in the popup window by using basic HTML language and {{ }}.

The HTML code enables you to determine the visual attributes for each pop-up window such as font size, line spacing, while the {{ }} are used to indicate where the data previously inputted in the template_datafield for each object.

For example, the following template

<span style=\”font-size:1.2em\”>{{name}}</span><br><br>
<b>{{tauxVol}}</b> vols pour 1000 hab. en 2016<br>
Soit:<br>
{{totalVol}} vols<br>
dont :<br>
{{nombreVoiture}} voitures<br>
{{nombre2roues}} deux-roues

will result in the following pop-up

Stylized data-layer pop-up

Once you’ve finished coding your template, add it to thetemplatefield of your data layer.

Don’t forget to save your work to date to insure that your pop-ups pop!

And if we put it all together?

You can produce a map featuring colorful data layers as well as pop-ups using the simple tools as described above that looks like this :

Click here to see the map

💡 Helpful Hint — use a GIS program to organize your data set and to create your GeoJSON in a simple-style format yourself or contact us so we can help!

For more information on GeoJSON data layers, data visualization or any other specific request, don’t hesitate to contact us.

***

Wemap developed a breakthrough map technology that has been adopted in a few months by global leaders like Air France, Hachette and ministère de la Culture et de la Communication. The French-American start-up is building a mapping platform to offer individuals and organizations a bridge to the real world: combining meaningful information and practical services. Wemap combines an intuitive user experience and a powerful tool to connect a map to any sources and publish it. By empowering publishers to create and embed live maps with their content in minutes, Wemap has already reached more than 250 million views of its maps.

To learn more about Wemap’s technology: https://getwemap.com.