Class: Map

Galigeo.Map(mapId, options)

new Map(mapId, options)

Galigeo.Map is used to instantiate the Galigeo map.

Parameters:
Name Type Description
mapId String

Element ID that refers the map div on the page
options Object
  • {
    • "id": 'MapUniqueId',
    • "lang": 'en/fr/de',
    • "name": 'title of the map',
    • "user": 'user login (optional)',
    • "profile": 'override profile forced (optional)',
    • "apiKey": 'When a user is specified, then the apiKey is mandatory',
    • "variables": { "departements": "1,25,87", "others": '...' }
    • }
Example
const map = new Galigeo.Map('mapId', {
    id: 'myMapId',
    name: 'My Map',
    url: 'https://server/Galigeo'
});

Methods

addDataUrl(dataUrl, name)

Add url of csv or Xlsx data to push it in the map / Upload a CSV directly to a map ex: addDataUrl('http://localhost/files/fr_cities.csv', 'FrCities');

Parameters:
Name Type Description
dataUrl String

file url .
name String

name of dataset in the map .

createFeatures(features, symbols)

Add a array of features to the map. This function adds a new layer on the map.

Parameters:
Name Type Description
features Array.<Object>
  • ex: lines [{ "type": "Feature", "properties": { "party": "abc", "popupContent": "popupContent !!!!!!!" }, "geometry": { "type": "LineString", "coordinates": [[-105, 40], [-110, 45], [-115, 55]] } }, { "type": "Feature", "properties": { "party": "abc", "popupContent": "popupContent !!!!!!!" }, "geometry": { "type": "LineString", "coordinates": [[-100, 40], [-105, 45], [-110, 55]] } }]
  • ex: polygons { "type": "Feature", "properties": { "party": "Republican", "popupContent": "popupContent !!!!!!!" }, "geometry": { "type": "Polygon", "coordinates": [[ [-104.05, 48.99], [-97.22, 48.98], [-96.58, 45.94], [-104.03, 45.94], [-104.05, 48.99] ]] } }, { "type": "Feature", "properties": { "party": "Democrat", "popupContent": "popupContent !!!!!!!" }, "geometry": { "type": "Polygon", "coordinates": [[ [-109.05, 41.00], [-102.06, 40.99], [-102.03, 36.99], [-109.04, 36.99], [-109.05, 41.00] ]] } }]
symbols Object | undefined

a style of features - ex: { points: { fillColor: "#74D76F", color: "#74D76F", fillOpacity: 1, radius: 8, weight: 1 }, polyline: { fillColor: '#9bcc01', color: '#92bd11', weight: 2, opacity: 0.8, fillOpacity: 0.4 } }
Returns:

layerLeaflet the object leaflet in the map

createMarker(feature, style, iconSvgOptions, svgUrl)

Create new marker in the position x,y with custom svg image or style

Parameters:
Name Type Description
feature Array.<Number>

[x,y]
style Object | undefined

the leaflet style
iconSvgOptions Object

ex: {iconSize: [40, 40]}
svgUrl String

URL of the SVG
Returns:

layerLeaflet the marker object leaflet in the map

Example
var feature = [ event.latlng.lat, event.latlng.lng ];
var iconSvgOptions = { iconSize : [ 40, 40 ] };
var svgXml = `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker" class="svg-inline--fa fa-map-marker fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="${color}" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"></path></svg>`;
var url = encodeURI("data:image/svg+xml," + svgXml).replace('#', '%23');
markerLayer = mapGaligeo.createMarker(feature, undefined, iconSvgOptions, svgXml);

deleteLayer(markerLayer)

Remove marker or any leafletLayer (geojson ...) from the map

Parameters:
Name Type Description
markerLayer Object

the marker object leaflet in the map

disableMapNavigation()

disable navigation like zoom & pan ... when it's enabled

doSelectionByGeojson(latlngs, layerId)

Select a polygon on the map. This function create a selection using the selection tool.

Parameters:
Name Type Description
latlngs Array.<Number>

Array of coordinates
layerId String

Id of layer to select it
Example
var latlngs = [[47.39091206104779, 0.12084960937499999],
		[45.282617057517406, -0.714111328125],
		[45.18978009667531, 5.712890625],
		[47.4057852900587, 5.9765625],
		[47.39091206104779, 0.12084960937499999]];
       map.doSelectionByGeojson(latlngs, 'layerId');

enableMapNavigation()

enable navigation like zoom & pan ... when it's disabled

filter(datasetId, query, callback)

Filter a dataset using a condition

Parameters:
Name Type Description
datasetId String

dataset name
query String

The condition used to filter
callback function

called when the filter action is finished
Example
map.filter('cities', 'city=Paris', ()=> {
  console.log("end filter");
});

getExtent() → {Array.<Number>}

Get the current extent of the map

Returns:

extent [xmin, ymin, xmax, ymax] (wgs84) .

Type
Array.<Number>

getLayers() → {Array.<ggoLayer>}

Get list of map layers.

Returns:

layers

Type
Array.<ggoLayer>

load(callback, failCallback)

Triggers the map loading. This function will load the map into the div specified by the constructor

Parameters:
Name Type Description
callback function

called when map is loaded .
failCallback function

called when we have loading error .

off(eventName, callback)

Unregister an event

Parameters:
Name Type Description
eventName String

name of event
callback function

function that the event is listening

on(eventName, callback) → {ggoEvent}

Register an event. The list of supported events is described below.

Parameters:
Name Type Description
eventName String

name of action

  • Map events 'legend-updated', 'visibility-change', 'scale-change', 'click', 'OneClickMap', 'zoomend', 'load', 'dragend', 'reorder', 'moveend', 'overlayremove', 'dblclick', 'mousemove'
  • layers events like ('layer:select' , 'layer:hover', ...)
callback function

function used to listen event return event object
Returns:

event

Type
ggoEvent
Example
map.on('click', (e)=>{console.log('click on '+e.latlng)});

print(options)

Take a screenshot of the map

Parameters:
Name Type Description
options Object
  • ex: {useCORS: true, callback: function(png) { // save your image}, x:0, y:0, width: undefined or 400, height: undefined or 400, dpi: 144, dropAreaElements: [htmlElements to remove], callbackError: function (err) {// do something}, withLegend: true default false }
  • useCROS => used when we need proxy basemaps
  • x => start position of print
  • y => start position of print
  • width => width of img generated from the position x // undefined => full width
  • height => height of img generated from the position y // undefined => full height
  • dpi => print precision
  • dropAreaElements list of element to remove from print div
  • withLegend => add legend to print

refresh(callback, layerName)

Refresh a layer

Parameters:
Name Type Description
callback function

Called after action is finished
layerName String

Name of layer to refresh

setBasemap(basemap)

Set the basemap on the map. The list of basemap parameters is described on the main product documentation.

Parameters:
Name Type Description
basemap Object

ex: { "label": "osm", "Title": "OpenStreetMap_3D", "Description": "This map service displays OpenStreetMap features with a gery theme ideal for thematic display.", "Thumbnail": "osm_mapnik.jpg", "url": "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", "attribution": "© OpenStreetMap contributors", "minZoom": 1, "maxZoom": 19, "format": "jpg", "default": false, "zoomSnap": 1, "thirdDimension": true };

setExtent(xmin, xmax, ymin, ymax)

Zoom to the given extent in the map

Parameters:
Name Type Description
xmin Number

the min position x (wgs84) .
xmax Number

the max position x (wgs84) .
ymin Number

the min position y (wgs84) .
ymax Number

the max position y (wgs84) .

setLayerVisibility(name, visibility)

Set the visibility of a layer

Parameters:
Name Type Description
name String

Layer name
visibility Boolean

true | false

setView(coordinates, zoom)

Zoom to a specific location without animations

Parameters:
Name Type Description
coordinates Array.<Number>

[x,y] coordinates to zoom in
zoom Number

level used in the zoom

zoomToCoordinates(coordinates, zoom)

Zoom to a specific location using fly method

Parameters:
Name Type Description
coordinates Array.<Number>

[x,y] coordinates to zoom in
zoom Number

level used in the zoom