Tool to achieve the easiest way of communication with the map iframe.
Some of the multiple use case flows are documented in flows.md
<html>
<body>
<iframe id="map-frame" name="map-frame" src=""></iframe>
<button id="btZoomIn">Zoom In</button>
<script src="https://unpkg.com/@vidro/map-handler@1.0.5/dist/map-handler.js"></script> -->
<script>
var loadMapReq = new XMLHttpRequest();
loadMapReq.addEventListener("load", function(){
communicator = new VidroMaps.Communicator({this.responseText.message.sessionToken});
document.querySelector("#map-frame").src = `${this.responseText.message.iframe}?sessionToken=${this.responseText.message.sessionToken}`;
document.querySelector("#btZoomIn").addEventListener("click", function(){
communicator.ZoomIn();
});
}
loadMapReq.open("GET", "http://APIURL/map/PROJECT_ID",true);
loadMapReq.setRequestHeader('Content-type', 'application/json');
loadMapReq.setRequestHeader('Authorization',`Bearer ${USER_TOKEN}`);
loadMapReq.send();
</script>
</body>
</html>
You should have one iframe already created on the DOM with the attributes name="map-frame" id="map-frame"
.
You can do this inyecting directly to window:
<script src="path/to/lib.js"></script>
<script src="path/to/your.js"></script>
Or if you're working with NPM / ES6:
npm install --save @vidro/map-handler
...
import { Communicator } from "@vidro/map-handler";
If you are inyecting into window:
var communicator = new VidroMaps.Communicator({
sessionToken: sessionToken
});
Or if you're working with NPM / ES6:
const communicator = new Communicator({
sessionToken: "sessionToken"
});
If you want to see console.logs
, you can activate logs with setDebug
method. Once map is loaded, invoke this method. Will create or remove a cookie. After calling setDebug
reload the map.
Logs are deactivated by default.
setDebug(debug)
E.G.
//activate
setDebug(1);
//deactivate
setDebug(0);
communicator.on("onZoomChange", function(data){
console.log("onZoomChange event",data);
});
Notifies zoom level changed
Notifies geometry added to map and featureId
When this tool is used, NO geom is added when drawing finishes. In case you want to add it, use Highlight
tool
E.G.
geom_astext: "POLYGON((418391.8715694032 4576832.484383419,418721.82301488414 4577299.667608328,418727.18131229794 4576947.724919814,418391.8715694032 4576832.484383419))"
featureId: "uuid of geometry added'
srid: 'EPSG:25831'
Notifies when map or layers are loaded.
There're two types of events:
map
is dispatched when map (with background) is loaded.layer
is dispatched when a layer is loadedtiled
is dispatched when a tiled is loaded
map
E.G:
{what:'map'}
layer
E.G:
{what:'layer'
name:'Arc'}
Notifies when layers are unloaded.
There's one type of events:
layer
is dispatched when a layer is unloadedtiled
is dispatched when a tiled is unloaded
layer
E.G:
{what:'layer'
name:'Arc'}
Notifies an array of displayed layers
Notifies an array of displayed GeoJSON layers
Notifies wich layer is marked as active
Notifies when WMS is available for this map
List of available layers from WMS server
Formatted Layers TOC (table of contents)
Notifies clicked coordinates (x,y), a BBOX in WKT and map srid
BBOX by default is a 20m box. You can customize this value with method setBboxSize
First coordinate is X value.
E.G:
{
coordinates: (2) [419463.63262834214, 4577166.970846243],
bbox: "POLYGON((452249.04604797193 4599115.704682493,452254.04604797193 4599115.704682493,452254.04604797193 4599120.704682493,452249.04604797193 4599120.704682493,452249.04604797193 4599115.704682493))",
srid: "EPSG:25831",
type: "coordinates"}
Notifies info results. There're 2 availables infos wms
and giswater
E.G
wms
:
{type: "info", infoType: "wms", data: "<GetFeatureInfoResponse>↵ <Layer name="Incidencia_… </Feature>↵ </Layer>↵</GetFeatureInfoResponse>↵"}
E.G
giswater
:
{type: "info", infoType: "giswater", data: {…}}
Receives a list of elements from a `getElementsFromLayer request
{type: "layerElements", data: {xml or json}}
Notifies user position, coordinates (x,y)
First coordinate is X value.
E.G
{type: "geolocation", coordinates: Array(2)}
coordinates: (2) [419297.8249458591, 4576821.519666988]
Giswater's tiled background has two events, one for notify if is available or not, and a another one for notify if is rendered or not
giswaterTiledBackgroundAvailable
and giswaterTiledBackgroundDisplayed
{type: "giswaterTiledBackgroundAvailable", available: true/false}
{type: "giswaterTiledBackgroundDisplayed", visible: true/false, tiled: "tiled id"}
List of available filters for a Giswater layer
{type: "GiswaterLayerAvailableFilters", filters: array}
Notifies errors
E.G.
{type: "error", error: "No clicked coordinates"}
Notifies map status, as tiled loaded, background visible, etc..
Zooms to given coordinates
Params
- lat (x)
<integer>
- long (y)
<integer>
- zoomLevel
<integer>
- zoom level
E.G.
zoomToCoordinates(419006.12985785044, 4576698.8136144625,18);
center map to given coordinates
Params
- lat (x)
<integer>
- long (y)
<integer>
E.G.
CenterMap(419006.12985785044, 4576698.8136144625,18);
Launches drawing tools with the geometry type
Params
- geom
<string>
- geometry typePoint
|Line
|Polygon
Optional parameters
texts
(object
): Texts to be displayed with draw tools.start
(string
): E.G. "Click to start drawing"continnue
:(string
): E.G. "Click to to continue drawing"
center
(object
): Center options.style
(object
):fill
(string
): The fill color for the drawn geometry.stroke
(string
): The stroke color for the drawn geometry.
drawOnEnd
(boolean
): Is is set tofalse
geometry will not be added on end drawing. The event with the drawn geometry will still be emittedshowConfirm
(boolean
): show or hide component for end drawing. If is set to false,CancelAddGeom()
must be handled by the user.
Cancels draw geometry
E.G.
CancelAddGeom();
E.G.
AddGeom('Point');
AddGeom('Line');
AddGeom('Polygon');
//Draw polygon with no showConfirm
AddGeom('Polygon', {showConfirm: false});
An geomAdded
event will be received after calling the method.
Set the BBOX size of clicked coordinates. When the receives a click events, calculates an bounding box of bboxsize meters.
E.G.
setBboxSize(5); //set a bbox of 5 meters
Clears drawn geometries
Shows/hides a layer.
*Important
This method loads a single layer. If you need to load multiple layers, use loadMultipleLayers()
method
If ypu need to load multiple layers
Params
- layerName
<string>
- layer name - properties
<object>
- optional layer properties- gutter
<integer>
- The size in pixels of the gutter around image tiles to ignore, only applies for multitile layer - singletile
<boolean>
- SingleTile Layer - transparent
<boolean>
- Transparent Layer - type
<string>
- layer type (wms, geojson...)
- gutter
By default, layer properties will be:
gutter: 0
singletile: false
- will render a multitile layer
transparent: true
E.G.
With no properties
toggleLayer('somelayer_name');
With properties
toggleLayer('somelayer_name', {gutter: 10, transparent: false, singletile: false);
Toggles (show/hide) a list of layers. Layers must be loaded before with loadMultipleLayers
Loads multiple layers. Use this method if you want to load multiple layers.
Params
- layers
<array>
: array of layers, each layer with same proerties thantoggleLayer
method.
Sets a layer as acticve layer, used for infos
E.G.
setActiveLayer('somelayer_name');
Reloads displayed layers
E.G.
reloadDisplayedLayers();
Gets a list of available layers from WMS server
E.G.
loadWMSAvailableLayers();
An availableWMSLayers
event will be received after calling the method.
Params
- layer_name
<string>
: layer name
Brings layer to top.
E.G.
bringLayerToTop('somelayer_name');
Params
- layer_name
<string>
: layer name
Brings layer to bottom.
E.G.
bringLayerToBottom('somelayer_name');
Gets a formatted Layers TOC (Table of contents)
E.G.
getToc();
An getToc
event will be received after calling the method.
Gets a list of elements from a layer, based on a WMS request
getElementsFromLayer(layer,limit,format)
Params
- layer
<string>
- layer name - limit
<integer>
- limit output number of elements (default 100) - format
<string>
- output formatxml
- defaultjson
There're two available info from coordinates wms
or giswater
.
Important a click on the map
must be done before calling this method.
If you don't specify a layer, will use the layer setted as Active layer
Params
-
type
<string>
- info type-
wms
- wms info -
giswater
- giswater info -
geojson
- geojson info
-
-
layer
<string>
optional layer name to do info. If null, will use current active layer. -
hitTolerance
<integer>
optional for geoJSON Info, pixels inside the radius around the given will be checked for features. Default5
. -
format
<string>
optional - output format for WMS requestsxml
- defaultjson
E.G.
infoFromCoordinates('wms'); //will use active layer
infoFromCoordinates('giswater');
infoFromCoordinates('giswater','Arc');
infoFromCoordinates('wms','Arc',null,'json'); //will use active layer and json output
An info
event will be received after calling the method.
Geolocalizes user. Will dispatch geolocation
event .
Params
- toggle
<Boolean>
- starts or cancels geolocation
E.G.
//start
Geolocalize(true)
//cancel
Geolocalize(false)
Important Add allow="geolocation"
to html iframe tag.
Highlights & draws a geometry. Allows animation and zoom to element.
If you want to draw a geom, just use DrawGeometries
method
Params
geom
(string
): The geometry string in WKT to highlight.
Optional parameters
zoom
(object
): Zoom options.type
(string
): The type of zoom (level
orelement
).level
: Zoom to a specific zoom level.element
: Zoom to the center of the geometry.
zoomLevel
(number
, optional): The zoom level (1 to 28). Required iftype
is set tolevel
.
center
(object
): Center options.false
will not center map to element1
will center always map to element2
will center element only if is outside current view extent
data
(object
): Additional data associated with the highlight.feautureId
(string
): The ID of the feature.name
(string
): The name of the feature.- ... any extra data will be added to feature
- style (
object
): geometry styling optionsfill
(string
): The fill color for the highlighted geometry.stroke
(string
): The stroke color for the highlighted geometry.
animate
(boolean
): Indicates whether to animate the highlight.duration
: time of the animation in millisecondsrepeat
: true/false for repeteating animation
Example of animation
E.G.
//Highlight a line and zoom to level 6
let options = {
'geom': 'MULTILINESTRING((418596.62555076234 4577083.383681167,419026.2319996517 4577216.795306675))',
'zoom':{
'type':'level',
'zoomLevel':6
}
}
Highlight(options);
//Highlight a line to geometry center
let options = {
'geom': 'MULTILINESTRING((418596.62555076234 4577083.383681167,419026.2319996517 4577216.795306675))',
'zoom':{
'type':'element'
}
}
Highlight(options);
use DrawGeometries
Draws a single geometry, in case you want to draw multiple geometries simultaneusly use DrawGeometries
method
E.G.
//Draw a geometry with yellow stroke
const geom = 'MULTILINESTRING((418596.62555076234 4577083.383681167,419026.2319996517 4577216.795306675))'
const style = {
stroke_color: "rgb(233, 244, 75)"
}
}
DrawGeometry(geom,style,'sampleName','mockId');
Draws geometries
Params
- geoms
<array>
:- item
<object>
:- geom
<string>
- geometry string - style
<object>
- stroke_color
<string>
- fill_color
<string>
- geom_radius
<integer>
- stroke_width
<integer>
- font_color
<string>
- font
<string>
- placement
<string>
- fontFillColor
<string>
- fontStrokeColor
<string>
- fontStrokeColor
- display
<string>
- fontStrokeWidth
<integer>
- offsetY
<integer>
- baseline
<string>
- align
<string>
- stroke_color
- name
<string>
feauture name - id
<string>
feauture id
- geom
- item
E.G.
//Draw a geometry with yellow stroke
const geom = 'MULTILINESTRING((418596.62555076234 4577083.383681167,419026.2319996517 4577216.795306675))'
const style = {
stroke_color: "rgb(233, 244, 75)"
}
}
const item = {geom,style,'sampleName','mockId'};
DrawGeometries([item]);
Removes a geometry by ID
Params
- id
<string>
- rendered geometry unique - layer
<string>
- layer name, optional
E.G.
RemoveGeometry('25', 'somlayer')
Removes geometries by property value
Params
- layer
<string>
- layer name, optional - property
<string>
- property name - value - property value
E.G.
RemoveGeometriesByProperty( 'somlayer','type','something')
Update geometry style based on property value
Params
- layer
<string>
- layer name, optional - property
<string>
- property name - value - property value
- style
<object>
- stroke_color<string>
- fill_color<string>
- geom_radius<integer>
- stroke_width<integer>
- font_color<string>
- font<string>
- placement<string>
- fontFillColor<string>
- fontStrokeColor<string>
- display<string>
- fontStrokeWidth<integer>
- offsetY<integer>
- baseline<string>
- align<string>
E.G.
UpdateGeometriesByProperty( 'somlayer','type','something',{
stroke_color: "rgb(255, 0, 0)"}
)
Deprecated toggleGiswaterTiled
Toggles tiled background (in case tiled background is configured)
Params
- toggle
<boolean>
shows/hides tiled background - tiled
<string>
tiled background name
E.G.
toggleTiled(true);
Toggles secondary background (in case secondary background is configured)
Params
- toggle
<boolean>
shows/hides secondary background
E.G.
toggleSecondaryBackground(true);
Adds geoJSON layer
Params
-
geoJSON
<geoJSON>
geoJSON data -
options
<json>
layer options- fillcolor
<string>
fill color. If null will use red color (#ff0000) - strokecolor
<string>
strokecolor color. If null will use red color (#ff0000)
- fillcolor
-
name
<string>
geoJson layer name, if null will use a random string
E.G.
addGeoJSON(geoJSON,options, name);
addGeoJSON('GeoJSONContent',{},null);
const options = {
fillcolor:'#e3ff00',
strokecolor: '#e3ff00'
}
addGeoJSON('GeoJSONContent', options,'name');
Removes a GeoJSON Layer
removeGeoJSONLayer(layerName);
removeGeoJSONLayer('somename');
Clears geoJSON layers
E.G.
clearGeoJSON();
Deprecated setGiswaterFilters
Set filters for displayed layers
Filters must be a JSON with valid fields. On Giswater/QGIS projects, available layer filters can be obtained with method getGiswaterLayerAvailableFilters
Each filter must have this format:
- layer_id
- layer*name - *
qgis_name
property_ - filters:
- name : field name
- condition :
=
,!=
,<
,>
,<=
,>=
,in
,between
- value: value to be filtered
- value2: second value, only for
between
conditions
setFilters(JSON);
E.G.
setFilters([
{
layer_id: 1,
layer_name: "mylayer",
filters: [
{
name: 'exp_id',
condition: 'in',
value: "'1','4'",
value2: null
},
{
name: 'status',
condition: '=',
value: 'active',
value2: null
},
{
name: 'anotherField',
condition: 'between',
value: '100',
value2: '200'
}
]
}
]);
Get available WMTS filters for a Giswater layer
getGiswaterLayerAvailableFilters(layername);
E.G.
getGiswaterLayerAvailableFilters("Arc");
Sets colors and stroke width for added & highlight geometries.
Properties:
geom_stroke_color
- stroke color in RGB formatgeom_fill_color
- fill color in RGB formatgeom_stroke_width
- stroke width in pixels, default 1.geom_shape
- shape por point,circle
(default) orsquare
geom_radius
- point radius or square side in pixels. Default 4.
setCustomColors({geom_stroke_color, geom_fill_color, geom_stroke_width,geom_shape});
E.G.
setCustomColors({
geom_stroke_color: 'rgb(19, 39, 99,0.5)',
geom_fill_color: 'rgb(19, 39, 99,0.5)',
geom_stroke_width: 1,
geom_shape: 'circle',
geom_radius: 2
});
On Bmaps projects, default values are taken from Backoffice:
geom_stroke_color -> Bmaps: geom_select_stroke_color
geom_fill_color -> Bmaps: geom_select_fill_color
Change background
Properties:
newBackgroud
- background name (OSM, google, CartoDBLight,CartoDBDark)
changeBackground('google');
Starts measure tools
Properties:
type
- measure typeline
orarea
textStart
- helper text to display when tool startstextContinue
- helper text to display when tool continues
initMeasure('line','Click for start measuring','Clic for continye measuring`);
Stop measure tools
cancelMeasure();
Is possible to use multiple iframe on a single page, follow this steps.
- Set to your
iframe
tags the id & value - Add to each
iframe.src
&domId=IFRAME_ID
- Instantiate each iframe:
var communicator = new VidroMaps.Communicator({
sessionToken: sessionToken,
id:'IFRAME_ID'
});
examples/simple/
A simple integration with just zoom buttons
- Gets user, password and API url from the url
- Request a user token to the API
- Loads the first map of the user
https://www.vidrosoftware.com/examples/simple/?user=USER&pwd=USER_PASWORD&api=API_URL
examples/full/
Full integration
- User, password and API url are defined on the html form
- Stores token and last map loaded in a fake cache
- There's a form for choosing map and customize map parameters
https://www.vidrosoftware.com/examples/full/
examples/vidromaps/
Vidromaps integration
- Paste iframe code
https://www.vidrosoftware.com/examples/vidromaps/
examples/serveLess/
Server less sample integration
- Gets user, password and API url from the url
- Request a user token to the API
- Loads the first map of the user with one layer rendered
- On map click, performs an wms info, displays one attribute, highlights the clicked point and centers map on that point
examples/multipleiframes/
Multiple iframes integration
- Replace
YOUR_SESSION_TOKEN
with your session token code on both inputscode1
andcode2
.
https://www.vidrosoftware.com/examples/multipleiframes/
- Custom logo is not displayed
Could be CORS issue. Check the headers sent by your server.
With Apache can be solved with and .htaccess
file with this content:
Header set Access-Control-Allow-Origin "*"
Header add Cross-Origin-Resource-Policy: "cross-origin"
Header add Cross-Origin-Embedder-Policy: "require-corp"
- QGIS Broken symbology
QGIS multi tile layers could show broken symbology:
This can be solved using singletile: true
or adding gutter: value in pixels
if is a multitiule layer, on toggleLayer method.
Is if is a Giswwater project, you can set this options (Render mode
and Gutter
) on Bmaps backoffice.