Getting started

What is it ?

A quick way to discover wemap SDK features is to use Wemap Lite. It allows you to embed a Livemap and populate it dynamically using Javascript. The embedded map won’t be linked to the Wemap API but only to the pinpoints that you inserted in it.

How to use it ?

The first step is to go on Wemap Pro and create a map. Then, do not link any list or pinpoint to it, simply scroll down and click on the button Save and get my map to get the code to embed your new map.

Paste this code in your web page to load your Livemap. It will be an empty map, since you didn’t link any content to it.

Using the Livemap.setPinpoints method, you will be able to populate your map.

To know what fields are available for describing your pinpoints, you can see the Pinpoint documentation.

Web page example

Here is an html structure which displays the demo Livemap. The next sections will give you some javascript code examples. To test one of them, simply insert it after the line Insert your code here.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Wemap-lite demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id='map-container' style='width: 100%; height: 100%;'></div>
<script type='application/javascript' src='https://livemap.getwemap.com/js/sdk.min.js'></script>
<script type='application/javascript'>
var container = document.getElementById('map-container');
var options = {
emmid: 7101,
token: '80DLM9N3JPOXW3X5MN0YV3DNG'
};
var livemap = wemap.v1.createLivemap(container, options);
// Insert your code here
</script>
</body>
</html>

Pinpoint marker

This section describes the kind of markers offered by the Livemap, depending on the pinpoint data.

Simple pinpoints

Simple pinpoints (called category pinpoints) are displayed with a circle icon.

This code populates the map with two simple pinpoints.

Note the field image_url that allows you to change the icon that will represent your pinpoint on the map.

var pinpoints = [{
id: 1,
name: 'Wemap Office',
latitude: 43.609138,
longitude: 3.884193,
description: 'Where magic happens',
image_url: 'https://api.getwemap.com/images/pps-categories/icons_mood-rocket.png',
type: 1
}, {
id: 2,
name: 'Effeil Tower',
latitude: 48.858370,
longitude: 2.294481,
description: 'What is that ?',
type: 1
}];
livemap.setPinpoints(pinpoints);

image

Media pinpoints

The media pinpoints are pinpoints attached to an image or a video. They will be displayed differently on the map.

The image pinpoints will be displayed with a square image. The video pinpoints will be displayed with a square thumbnail of their attached video.

When opening them, the media will be displayed at the top of the view.

Image pinpoint

This code populates the map with one image pinpoint. The required fields to have an image pinpoint are:

  • type: 2
  • media_type: ‘image’
  • media_url: Url of you image
var pinpoints = [{
id: 1,
name: 'Effeil Tower',
latitude: 48.858370,
longitude: 2.294481,
description: 'What is that ?',
media_url: 'http://1.bp.blogspot.com/_2IU2Nt4rD1k/S7NYdiVpUeI/AAAAAAAABRY/YWJbdCPlllI/s400/Eiffel_Tower.JPG',
media_type: 'image',
type: 2
}];
livemap.setPinpoints(pinpoints);

image

Video pinpoint

The required fields to have a video pinpoint are: To have a video pinpoint, you have to:

  • type: 3
  • media_type: ‘video’
  • media_url: Url of your video
  • media_thumbnail_url: Url of the video thumbnail
var pinpoints = [{
id: 1,
name: 'Le Pont du Diable',
latitude: 43.707649,
longitude: 3.557368,
media_url: 'https://www.youtube.com/watch?v=iXgmbvutU8Q',
media_thumbnail_url: 'https://i.ytimg.com/vi/iXgmbvutU8Q/hqdefault.jpg',
media_type: 'video',
type: 3
}];
livemap.setPinpoints(pinpoints);

image

Pinpoint details

This section describes the dfferent parts displayed in the pinpoint details view.

Name

The name of the pinpoint is provided by the field name. It’s displayed at the top of the pinpoint details view.

Author informations

The informations about the pinpoint author are provided by the field author.

author: {
name: 'name of the author',
photo_url: 'url of the avatar'
}
var pinpoints = [{
id: 1,
name: 'Wemap Office',
latitude: 43.609138,
longitude: 3.884193,
description: 'Where magic happens',
image_url: 'https://api.getwemap.com/images/pps-categories/icons_mood-rocket.png',
type: 1,
author: {
name: 'Wemap',
photo_url: 'https://api.getwemap.com/images/pps-categories/icon_circle_maaap.png'
}
}];
livemap.setPinpoints(pinpoints);

image

Address

The address (given by the address field) is displayed under the pinpoint author informations.

Media

The media can be a photo or a video. They will be displayed at the top of the pinpoint details view. Have a look to media pinpoints to see how to structure them.

Description

The description is a rich field. It can be text or html, that’s why it is very powerfull.

var pinpoints = [{
id: 1,
name: 'Wemap Office',
latitude: 43.609138,
longitude: 3.884193,
description: '<h3 style="font-weight: bold;">Some HTML</h3>The <strong>description</strong> field is very powerfull. You can put any HTML code inside.<br>Go to <a href="getwemap.com">Wemap website</a>',
image_url: 'https://api.getwemap.com/images/pps-categories/icons_mood-rocket.png',
type: 1,
author: {
name: 'Wemap',
photo_url: 'https://api.getwemap.com/images/pps-categories/icon_circle_maaap.png'
}
}];
livemap.setPinpoints(pinpoints);

image

Tags

The tags are given by the field tags which is a JSON array of strings.

var pinpoints = [{
id: 1,
name: 'Wemap Office',
latitude: 43.609138,
longitude: 3.884193,
description: '<h3 style="font-weight: bold;">Some HTML</h3>The <strong>description</strong> field is very powerfull. You can put any HTML code inside.<br>Go to <a href="getwemap.com">Wemap website</a>',
image_url: 'https://api.getwemap.com/images/pps-categories/icons_mood-rocket.png',
type: 1,
author: {
name: 'Wemap',
photo_url: 'https://api.getwemap.com/images/pps-categories/icon_circle_maaap.png'
},
tags: ['French tech', 'Startup', 'Happiness'],
}];
livemap.setPinpoints(pinpoints);

image