HEREMAP
A framework to simplify the use of HERE Maps, which a bunch of higher level functions. In addition, it brings geocoding and routing functions to Node.js
See examples in the demo directory, starting with demo/demo-basic.html.
Get your credentials at http://developer.here.com
Installation
1/ For use in Node.js, install the package:
npm install --save-dep heremap
To use in a js file
const hm = require("heremap");
hm.config({
app_id: YOUR APP_ID,
app_code: YOUR APP_CODE,
});
let res = await hm.geocode("avenue des champs elysees, paris);
console.log(res.coord);
2/ For use in browser, add these lines in your html file
<link rel="stylesheet" type="text/css" href="http://www.unpkg.com/heremap@2.2.6/css/heremap.css" />
<script src="http://www.unpkg.com/heremap@2.2.6/dist/libhere.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.unpkg.com/heremap@2.2.6/dist/heremap.min.js" type="text/javascript" charset="utf-8"></script>
<div id="map"></div>
Then in your JS script:
const hm = window.heremap;
hm.config({
app_id: YOUR APP_ID,
app_code: YOUR APP_CODE,
});
hm.map("map", {
zoom:5,
center: [48.8,2.3],
click: function(coord,button,key) {console.log("clicked on",coord,"with button",button);}
});
Demo
See under directory demo:
- demo-basic.html: how to display a simple map in a web pgae
- demo-cluster.html: how to cluster thousands of points on a map
- demo-markers.html: different kind of svg or png markers, with different size, anchor..
- demo-screenshot.html: how to do a screenshot of the map
- demo-asia.html: how to display high quality ap in Japan and Korea. (requires special credentials)
- demo-autocomplete.html: autocomplete exemple
- demo-touch.html: draw a polyline on a touch screen
- demo-nearcity.html: find big cities around the mouse click
- demo-locateme.html: display own location
Functions
- hm:PDEManager(opt)
Manage PDE requests
- hm:PDEManager(opt)
Manage PDE requests
- hm:bb2Poly(bb) ⇒
array
convert a bounding box into a list of five [lat,lng], last is same as first
- hm:bb2Poly(bb) ⇒
array
convert a bounding box into a list of five [lat,lng], last is same as first
- hm:bubbleUnique(coord, txt)
Display a unique bubble. Associated CSS style is .H_ib_body
- hm:bubbleUnique(coord, txt)
Display a unique bubble. Associated CSS style is .H_ib_body
- hm:bubbleUniqueHide()
hide a unique bubble
- hm:bubbleUniqueHide()
hide a unique bubble
- hm:buildIcon(opt) ⇒
promise
create an icon, to be used for a marker
- hm:buildIcon(opt) ⇒
promise
create an icon, to be used for a marker
- hm:circle(opt)
draw a circle
- hm:circle(opt)
draw a circle
- hm:cluster(coords, opt, cb) ⇒
H.map.layer.ObjectLayer
Creates a cluster of points
- hm:clusterHide()
Hide cluster layer
- hm:clusterShow()
Show cluster layer
- hm:config(opt)
To configure app_id, app_code and optionally use CIT and http
- hm:config(opt)
To configure app_id, app_code and optionally use CIT and http
- hm:coord2Point(coord) ⇒
object
Convert [lat,lng] to {lat,lng}
- hm:coord2Point(coord) ⇒
object
Convert [lat,lng] to {lat,lng}
- hm:coordA2O(arr) ⇒
array
Convert an array [lat,lng] to {lat,lng}
- hm:coordA2O(arr) ⇒
array
Convert an array [lat,lng] to {lat,lng}
- hm:coordO2A(obj) ⇒
array
Convert an object {lat,lng} to [lat,lng]
- hm:coordO2A(obj) ⇒
array
Convert an object {lat,lng} to [lat,lng]
- hm:coords2XY(coords) ⇒
array
Convert array of [lat,lng] to array of {x,y}
- hm:coords2XY(coords) ⇒
array
Convert array of [lat,lng] to array of {x,y}
- hm:coords2bb(coords) ⇒
Object
compute the bounding box of an array of corrds
- hm:coords2bb(coords) ⇒
Object
compute the bounding box of an array of corrds
- hm:coordsPDE2Array(lats, lng) ⇒
array
Convert coords of format PDE: lat or lng initial/100000, delta / 100000
- hm:coordsPDE2Array(lats, lng) ⇒
array
Convert coords of format PDE: lat or lng initial/100000, delta / 100000
- hm:countTiles(bbox, level) ⇒
int
count the number of tiles for a given bounding box and zoom level
- hm:countTiles(bbox, level) ⇒
int
count the number of tiles for a given bounding box and zoom level
- hm:detour(start, stop, waypoints) ⇒
Promise
Compute the detour for each waypoint provided, compared to normal route from A to B
- hm:detour(start, stop, waypoints) ⇒
Promise
Compute the detour for each waypoint provided, compared to normal route from A to B
- hm:geocode(address, opt) ⇒
Promise
geocode an address
- hm:geocode(address, opt) ⇒
Promise
geocode an address
- hm:geocoderAutocomplete(opt) ⇒
Promise
reverse geocode a coordinate. Can centered on a location or within a bounding box
- hm:geocoderAutocomplete(opt) ⇒
Promise
reverse geocode a coordinate. Can centered on a location or within a bounding box
- hm:getAvailableMapStyle() ⇒
json
list of all available map styles normal.day, night....
- hm:getAvailableMapStyle() ⇒
json
list of all available map styles normal.day, night....
- hm:getCenter() ⇒
coord
return coordinate of the center of the map
- hm:getCenter() ⇒
coord
return coordinate of the center of the map
- hm:getDefaultLayers() ⇒
object
return default layers, created by _platform.createDefaultLayers();
- hm:getDefaultLayers() ⇒
object
return default layers, created by _platform.createDefaultLayers();
- hm:getPlatform() ⇒
object
return platorm;
- hm:getPlatform() ⇒
object
return platorm;
- hm:getThrottleLimits() ⇒
string
get Throttle limts for various modules
- hm:getThrottleLimits() ⇒
string
get Throttle limts for various modules
- hm:getViewBB() ⇒
Object
return bounding box of visible part of map
- hm:getViewBB() ⇒
Object
return bounding box of visible part of map
- hm:getZoom() ⇒
number
return zoom value
- hm:getZoom() ⇒
number
return zoom value
- hm:htmlBounding() ⇒
object
provide bounding box of element hosting map, relative to window
- hm:htmlBounding() ⇒
object
provide bounding box of element hosting map, relative to window
- hm:isoline(opt) ⇒
Promise
compute an isoline. See more info on optional parameters
- hm:isoline(opt) ⇒
Promise
compute an isoline. See more info on optional parameters
- hm:layerCreate(name, visible)
create a layer
- hm:layerCreate(name, visible)
create a layer
- hm:layerDelete(name)
delete a layer
- hm:layerDelete(name)
delete a layer
- hm:layerEmpty(layer)
Empty a layer, or create it if not existing
- hm:layerEmpty(layer)
Empty a layer, or create it if not existing
- hm:layerFind(name)
find layer by its name or return null
- hm:layerFind(name)
find layer by its name or return null
- hm:layerSetVisibility(name, visible)
create a layer
- hm:layerSetVisibility(name, visible)
create a layer
- hm:linkid(linkid) ⇒
Promise
get linkid Information, based on routing
- hm:linkid(linkid) ⇒
Promise
get linkid Information, based on routing
- hm:locateMe(callback, opt)
watch position on HTML5 position. This requires HTTPS. Creates layer "_gps". To deactivate, call with null callback
- hm:locateMe(callback, opt)
watch position on HTML5 position. This requires HTTPS. Creates layer "_gps". To deactivate, call with null callback
- hm:map(htmlItem, opt)
create a map area within the specified item
- hm:map(htmlItem, opt)
create a map area within the specified item
- hm:marker(opt) ⇒
H.map.Marker
add a marker in a layer. SVG files can be created with https://editor.method.ac/
- hm:marker(opt) ⇒
H.map.Marker
add a marker in a layer. SVG files can be created with https://editor.method.ac/
- hm:matrix(source, dest, opt) ⇒
Promise
compute a matrix. See more info on optional parameters
Matrix size is limited to 1x100, 100x1 or 15xN
- hm:matrix(source, dest, opt) ⇒
Promise
compute a matrix. See more info on optional parameters
Matrix size is limited to 1x100, 100x1 or 15xN
- hm:placeAutoSuggest(opt) ⇒
Promise
Autocomplete of Places (POI). Can be centered on a locaiton or within a bounding box
- hm:placeAutoSuggest(opt) ⇒
Promise
Autocomplete of Places (POI). Can be centered on a locaiton or within a bounding box
- hm:placeExplore(opt, categories) ⇒
array
Discover places (POI) around a coordnate belonging to a list of categories
- hm:placeExplore(opt, categories) ⇒
array
Discover places (POI) around a coordnate belonging to a list of categories
- hm:placeGetCategory(center) ⇒
promise
Get Categories of Places (POI)
- hm:placeGetCategory(center) ⇒
promise
Get Categories of Places (POI)
- hm:placeSearch(opt, categories) ⇒
promise
Search for a Place (POI) around a coordinate matching a name
- hm:placeSearch(opt, categories) ⇒
promise
Search for a Place (POI) around a coordinate matching a name
- hm:point2Coord({lat,lng}) ⇒
array
Convert {lat,lng} to [lat,lng]
- hm:point2Coord({lat,lng}) ⇒
array
Convert {lat,lng} to [lat,lng]
- hm:polygon(opt)
Draw a polygon
- hm:polygon(opt)
Draw a polygon
- hm:polyline(opt)
Draw a polyline.
- hm:polyline(opt)
Draw a polyline.
- hm:reverseGeocode(coord) ⇒
Promise
reverse geocode a coordinate
- hm:reverseGeocode(coord) ⇒
Promise
reverse geocode a coordinate
- hm:route(source, dest, opt) ⇒
Promise
compute a route with optional waypooints. See more info on optional parameters
- hm:route(source, dest, opt) ⇒
Promise
compute a route with optional waypooints. See more info on optional parameters
- hm:screenshot(opt, opt) ⇒
data
perform a screenshot of the map and returns a promise with the data
- hm:screenshot(opt, opt) ⇒
data
perform a screenshot of the map and returns a promise with the data
- hm:setCenter(coord)
set center of the map
- hm:setCenter(coord)
set center of the map
- hm:setScheme(scheme)
define the scheme. List of scheme can be obtained from hm.getAvailableMapStyle()
- hm:setScheme(scheme)
define the scheme. List of scheme can be obtained from hm.getAvailableMapStyle()
- hm:setViewBB(opt)
sets bouding box to be displayed
- hm:setViewBB(opt)
sets bouding box to be displayed
- hm:setZoom(zoom)
set zoom level
- hm:setZoom(zoom)
set zoom level
- hm:simplify(coords, tolerance) ⇒
array
Simplify a polyline by using the Ramer-Douglas-Peucker algorithm
- hm:simplify(coords, tolerance) ⇒
array
Simplify a polyline by using the Ramer-Douglas-Peucker algorithm
- hm:tile2BB(tileX, tileY, level) ⇒
Object
compute the bounding box of a Tile
- hm:tile2BB(tileX, tileY, level) ⇒
Object
compute the bounding box of a Tile
- hm:touch(onoff, options)
activate touch, allowing hand drawing, with embedded simplification of the line
- hm:touch(onoff, options)
activate touch, allowing hand drawing, with embedded simplification of the line
- hm:xy2Coords(coords) ⇒
array
Convert array of {x,y} to array of [lat,lng]
- hm:xy2Coords(coords) ⇒
array
Convert array of {x,y} to array of [lat,lng]
- lineIntersects(A, B, C, D)
- marker:getCoord() ⇒
coord
get coordinates of a marker
- marker:getCoord() ⇒
coord
get coordinates of a marker
- stringify()
Stringifies a GeoJSON object into WKT
hm:PDEManager(opt)
Manage PDE requests
Kind: global function
Params
- opt
Object
- optional object {rps,concurrent}- [.rps]
int
- requests per second. Default = 10 - [.concurrent]
int
- max concurrent requests. Default = 5
- [.rps]
Example
const hm = window.heremap;
const pde = new hm.PDEManager({rps:10});
const layers = {
ROAD_GEOM_FC: {
callback: pdeGotRoadGeomFC,
fcLayers: [1,2]
},
POI_BIGGER: {
callback: pdeGotPOI,
level: 6
};
let bb = hm.getViewBB();
pde.setBoundingBox(bb);
pde.setLayers(layers);
pde.run().then(nbtile=> {console.log(nbtiles)});
- hm:PDEManager(opt)
- .getQueue() ⇒
object
- .getQueue() ⇒
object
- .getTilesInfo() ⇒
array
- .getTilesInfo() ⇒
array
- .run() ⇒
Promise
- .run() ⇒
Promise
- .setBoundingBox(bb)
- .setBoundingBox(bb)
- .setBoundingCoords(coords, add)
- .setBoundingCoords(coords, add)
- .setBoundingPolys(polygons, add)
- .setBoundingPolys(polygons, add)
- .setLayers(layers)
- .setLayers(layers)
- .setQueue(queue)
- .setQueue(queue)
- .getQueue() ⇒
hm:PDEManager.getQueue() ⇒ object
returns the current queue to be processed
Kind: static method of hm:PDEManager
Returns: object
- - {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:PDEManager.getQueue() ⇒ object
returns the current queue to be processed
Kind: static method of hm:PDEManager
Returns: object
- - {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:PDEManager.getTilesInfo() ⇒ array
provides array of rectangle showing various info for each tile downloaded
Kind: static method of hm:PDEManager
Returns: array
- of {bb,tileX,tileY,level} for each tiles downloaded
hm:PDEManager.getTilesInfo() ⇒ array
provides array of rectangle showing various info for each tile downloaded
Kind: static method of hm:PDEManager
Returns: array
- of {bb,tileX,tileY,level} for each tiles downloaded
hm:PDEManager.run() ⇒ Promise
run the queries in the queue, with throttle in place
Kind: static method of hm:PDEManager
Returns: Promise
- - returns promise with count of tiles as parameter
hm:PDEManager.run() ⇒ Promise
run the queries in the queue, with throttle in place
Kind: static method of hm:PDEManager
Returns: Promise
- - returns promise with count of tiles as parameter
hm:PDEManager.setBoundingBox(bb)
sets a bounding box to retrieve all the tiles in it
Kind: static method of hm:PDEManager
Params
- bb
Object
- bounding box {latm,latM,lngm,lngM}const bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingBox(bb)
sets a bounding box to retrieve all the tiles in it
Kind: static method of hm:PDEManager
Params
- bb
Object
- bounding box {latm,latM,lngm,lngM}const bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingCoords(coords, add)
retrieve all tiles needed for a list of coords
Kind: static method of hm:PDEManager
Params
- coords
array
- array of [lat,lng] - add
boolean
- false by default. set to true to add to existing queueconst bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingCoords(coords, add)
retrieve all tiles needed for a list of coords
Kind: static method of hm:PDEManager
Params
- coords
array
- array of [lat,lng] - add
boolean
- false by default. set to true to add to existing queueconst bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingPolys(polygons, add)
sets a list of polygons to contain the tiles. A Til is IN if one of the corner is in one of the polygons
Kind: static method of hm:PDEManager
Params
- polygons
array
- array of [[lat,lng],[lat,lng]..] - add
boolean
- false by default. set to true to add to existing queueconst poly=[ [[43.3,2.8],[43.35,2.34],[43.37,2.38]], [[48.8,0.4],[48.81,0.456],48.82,0.433],[48.83,0.45] ]; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingPolys(polygons, add)
sets a list of polygons to contain the tiles. A Til is IN if one of the corner is in one of the polygons
Kind: static method of hm:PDEManager
Params
- polygons
array
- array of [[lat,lng],[lat,lng]..] - add
boolean
- false by default. set to true to add to existing queueconst poly=[ [[43.3,2.8],[43.35,2.34],[43.37,2.38]], [[48.8,0.4],[48.81,0.456],48.82,0.433],[48.83,0.45] ]; pde.setBoundingBox(bb);
hm:PDEManager.setLayers(layers)
define the layers to be fetched
Kind: static method of hm:PDEManager
Params
layers
object
- {layerName:{level,callback,fcLayers},.....}- [.layerName]
string
- name of layer - [.callback]
function
- function to be called for each PDE request. parameters for call: (content,x,y,z,layerName) - [.level]
integer
- level for tile associated to specific layer. if not specified, layer.fcLayers is used - [.fcLayers]
array
- array of FC level, from 1 to 5 ```js const layers = { ROAD_GEOM_FC: { callback: pdeGotRoadGeomFC, fcLayers: [1,2] }, POI_BIGGER: { callback: pdeGotPOI, level: 6 };
pde.setLayers(layers); ```
- [.layerName]
hm:PDEManager.setLayers(layers)
define the layers to be fetched
Kind: static method of hm:PDEManager
Params
layers
object
- {layerName:{level,callback,fcLayers},.....}- [.layerName]
string
- name of layer - [.callback]
function
- function to be called for each PDE request. parameters for call: (content,x,y,z,layerName) - [.level]
integer
- level for tile associated to specific layer. if not specified, layer.fcLayers is used - [.fcLayers]
array
- array of FC level, from 1 to 5 ```js const layers = { ROAD_GEOM_FC: { callback: pdeGotRoadGeomFC, fcLayers: [1,2] }, POI_BIGGER: { callback: pdeGotPOI, level: 6 };
pde.setLayers(layers); ```
- [.layerName]
hm:PDEManager.setQueue(queue)
set the queue to run, form a list of tiles
Kind: static method of hm:PDEManager
Params
- queue
object
- {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:PDEManager.setQueue(queue)
set the queue to run, form a list of tiles
Kind: static method of hm:PDEManager
Params
- queue
object
- {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:PDEManager(opt)
Manage PDE requests
Kind: global function
Params
- opt
Object
- optional object {rps,concurrent}- [.rps]
int
- requests per second. Default = 10 - [.concurrent]
int
- max concurrent requests. Default = 5
- [.rps]
Example
const hm = window.heremap;
const pde = new hm.PDEManager({rps:10});
const layers = {
ROAD_GEOM_FC: {
callback: pdeGotRoadGeomFC,
fcLayers: [1,2]
},
POI_BIGGER: {
callback: pdeGotPOI,
level: 6
};
let bb = hm.getViewBB();
pde.setBoundingBox(bb);
pde.setLayers(layers);
pde.run().then(nbtile=> {console.log(nbtiles)});
- hm:PDEManager(opt)
- .getQueue() ⇒
object
- .getQueue() ⇒
object
- .getTilesInfo() ⇒
array
- .getTilesInfo() ⇒
array
- .run() ⇒
Promise
- .run() ⇒
Promise
- .setBoundingBox(bb)
- .setBoundingBox(bb)
- .setBoundingCoords(coords, add)
- .setBoundingCoords(coords, add)
- .setBoundingPolys(polygons, add)
- .setBoundingPolys(polygons, add)
- .setLayers(layers)
- .setLayers(layers)
- .setQueue(queue)
- .setQueue(queue)
- .getQueue() ⇒
hm:PDEManager.getQueue() ⇒ object
returns the current queue to be processed
Kind: static method of hm:PDEManager
Returns: object
- - {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:PDEManager.getQueue() ⇒ object
returns the current queue to be processed
Kind: static method of hm:PDEManager
Returns: object
- - {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:PDEManager.getTilesInfo() ⇒ array
provides array of rectangle showing various info for each tile downloaded
Kind: static method of hm:PDEManager
Returns: array
- of {bb,tileX,tileY,level} for each tiles downloaded
hm:PDEManager.getTilesInfo() ⇒ array
provides array of rectangle showing various info for each tile downloaded
Kind: static method of hm:PDEManager
Returns: array
- of {bb,tileX,tileY,level} for each tiles downloaded
hm:PDEManager.run() ⇒ Promise
run the queries in the queue, with throttle in place
Kind: static method of hm:PDEManager
Returns: Promise
- - returns promise with count of tiles as parameter
hm:PDEManager.run() ⇒ Promise
run the queries in the queue, with throttle in place
Kind: static method of hm:PDEManager
Returns: Promise
- - returns promise with count of tiles as parameter
hm:PDEManager.setBoundingBox(bb)
sets a bounding box to retrieve all the tiles in it
Kind: static method of hm:PDEManager
Params
- bb
Object
- bounding box {latm,latM,lngm,lngM}const bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingBox(bb)
sets a bounding box to retrieve all the tiles in it
Kind: static method of hm:PDEManager
Params
- bb
Object
- bounding box {latm,latM,lngm,lngM}const bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingCoords(coords, add)
retrieve all tiles needed for a list of coords
Kind: static method of hm:PDEManager
Params
- coords
array
- array of [lat,lng] - add
boolean
- false by default. set to true to add to existing queueconst bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingCoords(coords, add)
retrieve all tiles needed for a list of coords
Kind: static method of hm:PDEManager
Params
- coords
array
- array of [lat,lng] - add
boolean
- false by default. set to true to add to existing queueconst bb={ latm: 43.3494, latM: 43.8325, lngm: 2.2221 lngM: 2.5685 }; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingPolys(polygons, add)
sets a list of polygons to contain the tiles. A Til is IN if one of the corner is in one of the polygons
Kind: static method of hm:PDEManager
Params
- polygons
array
- array of [[lat,lng],[lat,lng]..] - add
boolean
- false by default. set to true to add to existing queueconst poly=[ [[43.3,2.8],[43.35,2.34],[43.37,2.38]], [[48.8,0.4],[48.81,0.456],48.82,0.433],[48.83,0.45] ]; pde.setBoundingBox(bb);
hm:PDEManager.setBoundingPolys(polygons, add)
sets a list of polygons to contain the tiles. A Til is IN if one of the corner is in one of the polygons
Kind: static method of hm:PDEManager
Params
- polygons
array
- array of [[lat,lng],[lat,lng]..] - add
boolean
- false by default. set to true to add to existing queueconst poly=[ [[43.3,2.8],[43.35,2.34],[43.37,2.38]], [[48.8,0.4],[48.81,0.456],48.82,0.433],[48.83,0.45] ]; pde.setBoundingBox(bb);
hm:PDEManager.setLayers(layers)
define the layers to be fetched
Kind: static method of hm:PDEManager
Params
layers
object
- {layerName:{level,callback,fcLayers},.....}- [.layerName]
string
- name of layer - [.callback]
function
- function to be called for each PDE request. parameters for call: (content,x,y,z,layerName) - [.level]
integer
- level for tile associated to specific layer. if not specified, layer.fcLayers is used - [.fcLayers]
array
- array of FC level, from 1 to 5 ```js const layers = { ROAD_GEOM_FC: { callback: pdeGotRoadGeomFC, fcLayers: [1,2] }, POI_BIGGER: { callback: pdeGotPOI, level: 6 };
pde.setLayers(layers); ```
- [.layerName]
hm:PDEManager.setLayers(layers)
define the layers to be fetched
Kind: static method of hm:PDEManager
Params
layers
object
- {layerName:{level,callback,fcLayers},.....}- [.layerName]
string
- name of layer - [.callback]
function
- function to be called for each PDE request. parameters for call: (content,x,y,z,layerName) - [.level]
integer
- level for tile associated to specific layer. if not specified, layer.fcLayers is used - [.fcLayers]
array
- array of FC level, from 1 to 5 ```js const layers = { ROAD_GEOM_FC: { callback: pdeGotRoadGeomFC, fcLayers: [1,2] }, POI_BIGGER: { callback: pdeGotPOI, level: 6 };
pde.setLayers(layers); ```
- [.layerName]
hm:PDEManager.setQueue(queue)
set the queue to run, form a list of tiles
Kind: static method of hm:PDEManager
Params
- queue
object
- {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:PDEManager.setQueue(queue)
set the queue to run, form a list of tiles
Kind: static method of hm:PDEManager
Params
- queue
object
- {key:callback,key:callback,....} where key = "x/y/z/layername"
hm:bb2Poly(bb) ⇒ array
convert a bounding box into a list of five [lat,lng], last is same as first
Kind: global function
Returns: array
- - [[latm,lngm],[latM,lngm],[latM,lngM],[latm,lngM],[latm,lngm]]
Params
- bb
Object
- {latm,latM,lngm,lngM}
hm:bb2Poly(bb) ⇒ array
convert a bounding box into a list of five [lat,lng], last is same as first
Kind: global function
Returns: array
- - [[latm,lngm],[latM,lngm],[latM,lngM],[latm,lngM],[latm,lngm]]
Params
- bb
Object
- {latm,latM,lngm,lngM}
hm:bubbleUnique(coord, txt)
Display a unique bubble. Associated CSS style is .H_ib_body
Kind: global function
Params
- coord
Array
- of the bubble - txt
String
- html text to display
hm:bubbleUnique(coord, txt)
Display a unique bubble. Associated CSS style is .H_ib_body
Kind: global function
Params
- coord
Array
- of the bubble - txt
String
- html text to display
hm:bubbleUniqueHide()
hide a unique bubble
hm:bubbleUniqueHide()
hide a unique bubble
hm:buildIcon(opt) ⇒ promise
create an icon, to be used for a marker
Kind: global function
Returns: promise
- the promise of created icon of type H.map.Icon
Params
- opt
object
- options to specify the icon- [.img]
string
- use a png/jpg image. Specify the url - [.svg]
string
- url a svg. This can be an inline svg, a url, or a svg from heremap - [.opt]
object
- style object- [.size]
number
|string
- size of icon, as 24 or 24x32 - [.ratio]
number
- for svg files, ratio of size. 0.5 = half - [.anchor]
number
|string
- anchor of icon, as 24 or "24x32" or "center". By default, bottom-center - [.tag]
string
- for svg, any tag like {tag} within the svg file will be replaced by its associated value
- [.size]
- [.img]
Example
hm.buildIcon({
img: "http://whatever.com/image.png",
opt: {size:24}
});
hm.buildIcon({
svg: "http://whatever.com/image.svg",
opt: {
ratio:0.5,
anchor:24x32
}
});
hm.buildIcon({
svg: "@svg/cluster.svg",
opt: {
size:24,
color:"red"
}
});
const svg = `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <ellipse stroke="null" ry="8" rx="7.618896" id="svg_1" cy="8" cx="7.837427" fill="{color}" fill-opacity="0.9"/></svg>`;
hm.buildIcon({
svg: svg,
opt: {
size:24,
color:"red"
}
});
hm:buildIcon(opt) ⇒ promise
create an icon, to be used for a marker
Kind: global function
Returns: promise
- the promise of created icon of type H.map.Icon
Params
- opt
object
- options to specify the icon- [.img]
string
- use a png/jpg image. Specify the url - [.svg]
string
- url a svg. This can be an inline svg, a url, or a svg from heremap - [.opt]
object
- style object- [.size]
number
|string
- size of icon, as 24 or 24x32 - [.ratio]
number
- for svg files, ratio of size. 0.5 = half - [.anchor]
number
|string
- anchor of icon, as 24 or "24x32" or "center". By default, bottom-center - [.tag]
string
- for svg, any tag like {tag} within the svg file will be replaced by its associated value
- [.size]
- [.img]
Example
hm.buildIcon({
img: "http://whatever.com/image.png",
opt: {size:24}
});
hm.buildIcon({
svg: "http://whatever.com/image.svg",
opt: {
ratio:0.5,
anchor:24x32
}
});
hm.buildIcon({
svg: "@svg/cluster.svg",
opt: {
size:24,
color:"red"
}
});
const svg = `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <ellipse stroke="null" ry="8" rx="7.618896" id="svg_1" cy="8" cx="7.837427" fill="{color}" fill-opacity="0.9"/></svg>`;
hm.buildIcon({
svg: svg,
opt: {
size:24,
color:"red"
}
});
hm:circle(opt)
draw a circle
Kind: global function
Params
- opt
*
- option for circle- [.layer]
String
- optional layer to use - [.coord]
array
- center of the circle, as [48.8,2.3] - [.radius]
number
- radius in meter - [.style]
object
- optional graphic style- [.strokeColor]
string
- color of perimeter - [.lineWidth]
number
- line width - [.fillColor]
string
- fill color
- [.strokeColor]
- [.layer]
hm:circle(opt)
draw a circle
Kind: global function
Params
- opt
*
- option for circle- [.layer]
String
- optional layer to use - [.coord]
array
- center of the circle, as [48.8,2.3] - [.radius]
number
- radius in meter - [.style]
object
- optional graphic style- [.strokeColor]
string
- color of perimeter - [.lineWidth]
number
- line width - [.fillColor]
string
- fill color
- [.strokeColor]
- [.layer]
hm:cluster(coords, opt, cb) ⇒ H.map.layer.ObjectLayer
Creates a cluster of points
Kind: global function
Returns: H.map.layer.ObjectLayer
- layer created
Params
- coords
Array
- array of [lat,lng,payload] - opt
object
- options for cluster- [.minZoom]
number
- min zoom for cluster to be visible - [.maxZoom]
number
- max zoom for cluster to be visible - [.noise]
object
- graphic to represent stand-alone point. {icon,size}- [.icon]
string
- png/jpg/svg file. @ as first character indicates a file from this package. Anchor will be bottom-center - [.size]
number
- optional size of icon
- [.icon]
- [.cluster]
object
- { weight:{icon,size}, weight:{icon,size},... }- [.icon]
string
- png/jpg/svg file to represent group of pois. @ as first character indicates a file from this package. Anchor will be middle of icon - [.size]
number
- size of icon
- [.icon]
- [.minZoom]
- cb
function
- callback to be called if click on item. Format cb(event, coord, payload, weigth).coord
is coord of iconpayload
is payload associated to point.weight
is number of points aggregated, when clicking on a cluster icon, 1 if single point
Example
let pois = [[48.8,2.3,"Hello world"],[48.5,2.4,"How are you"],[45.2,2.93,"Very well"]];
hm.cluster(pois);
// with more graphic options and callback defined
let opt = {
noise: {
icon: "mcdo.png",
size: 12
},
cluster: {
200: {
icon: "@svg/cluster_red.svg",
size: 64
},
75: {
icon: "@svg/cluster_orange.svg",
size: 52
},
2: {
icon: "@svg/cluster_green.svg",
size: 40
}
}
};
hm.cluster(pois, opt,
(event, coordinate, data, weight) => {
if (data)
console.log("click on point ", data);
else
console.log("click on cluster with weight", weight);
});
hm:clusterHide()
Hide cluster layer
hm:clusterShow()
Show cluster layer
hm:config(opt)
To configure app_id, app_code and optionally use CIT and http
Kind: global function
Params
- opt
Object
-opt
with parameters.- [.app_id]
string
- the app_id from developer.here.com (REST) - [.app_code]
string
- the app_code from developer.here.com (REST) - [.api_key]
string
- the api_key from developer.here.com (JS) - [.useCIT]
boolean
= false
- true to use CIT environment. - [.useHTTP]
string
= false
- true to use HTTP. - [.useHTTPS]
string
= true
- true to use HTTPS. - [.rps]
object
- set rps limit {routing:1,gc:2,rgc:10,pde:10}
- [.app_id]
Example
hm.config({
app_id: "YOUR APP_ID",
app_code: "YOUR APP_CODE",
api_key: "YOUR API_KEY",
});
hm:config(opt)
To configure app_id, app_code and optionally use CIT and http
Kind: global function
Params
- opt
Object
-opt
with parameters.- [.app_id]
string
- the app_id from developer.here.com (REST) - [.app_code]
string
- the app_code from developer.here.com (REST) - [.api_key]
string
- the api_key from developer.here.com (JS) - [.useCIT]
boolean
= false
- true to use CIT environment. - [.useHTTP]
string
= false
- true to use HTTP. - [.useHTTPS]
string
= true
- true to use HTTPS. - [.rps]
object
- set rps limit {routing:1,gc:2,rgc:10,pde:10}
- [.app_id]
Example
hm.config({
app_id: "YOUR APP_ID",
app_code: "YOUR APP_CODE",
api_key: "YOUR API_KEY",
});
hm:coord2Point(coord) ⇒ object
Convert [lat,lng] to {lat,lng}
Kind: global function
Returns: object
- - {lat,lng}
Params
- coord
array
- [lat,lng]
hm:coord2Point(coord) ⇒ object
Convert [lat,lng] to {lat,lng}
Kind: global function
Returns: object
- - {lat,lng}
Params
- coord
array
- [lat,lng]
hm:coordA2O(arr) ⇒ array
Convert an array [lat,lng] to {lat,lng}
Kind: global function
Returns: array
- {lat,lng}
Params
- arr
object
- [lat,lng]
hm:coordA2O(arr) ⇒ array
Convert an array [lat,lng] to {lat,lng}
Kind: global function
Returns: array
- {lat,lng}
Params
- arr
object
- [lat,lng]
hm:coordO2A(obj) ⇒ array
Convert an object {lat,lng} to [lat,lng]
Kind: global function
Returns: array
- [lat,lng]
Params
- obj
object
- {lat,lng}
hm:coordO2A(obj) ⇒ array
Convert an object {lat,lng} to [lat,lng]
Kind: global function
Returns: array
- [lat,lng]
Params
- obj
object
- {lat,lng}
hm:coords2XY(coords) ⇒ array
Convert array of [lat,lng] to array of {x,y}
Kind: global function
Returns: array
- array of {x,y}
Params
- coords
array
- array of [lat,lng]
hm:coords2XY(coords) ⇒ array
Convert array of [lat,lng] to array of {x,y}
Kind: global function
Returns: array
- array of {x,y}
Params
- coords
array
- array of [lat,lng]
hm:coords2bb(coords) ⇒ Object
compute the bounding box of an array of corrds
Kind: global function
Returns: Object
- - {latm,latM,lngm,lngM}
Params
- coords
array
- [[lat,lng],[lat,lng]]
hm:coords2bb(coords) ⇒ Object
compute the bounding box of an array of corrds
Kind: global function
Returns: Object
- - {latm,latM,lngm,lngM}
Params
- coords
array
- [[lat,lng],[lat,lng]]
hm:coordsPDE2Array(lats, lng) ⇒ array
Convert coords of format PDE: lat or lng initial/100000, delta / 100000
Kind: global function
Returns: array
- [lat,lng]
Params
- lats
array
- lng
array
hm:coordsPDE2Array(lats, lng) ⇒ array
Convert coords of format PDE: lat or lng initial/100000, delta / 100000
Kind: global function
Returns: array
- [lat,lng]
Params
- lats
array
- lng
array
hm:countTiles(bbox, level) ⇒ int
count the number of tiles for a given bounding box and zoom level
Kind: global function
Returns: int
- count of tiles
Params
- bbox
array
- bounding box, as {latm,latM,lngm,lngM}; - level
int
- zoom level
hm:countTiles(bbox, level) ⇒ int
count the number of tiles for a given bounding box and zoom level
Kind: global function
Returns: int
- count of tiles
Params
- bbox
array
- bounding box, as {latm,latM,lngm,lngM}; - level
int
- zoom level
hm:detour(start, stop, waypoints) ⇒ Promise
Compute the detour for each waypoint provided, compared to normal route from A to B
Kind: global function
Returns: Promise
- returns {reference: {start, stop, distance, distance2, time, time2} ,waypoints:[ {coord, distA, timeA, distB, timeB}]}
Params
- start
coord
- starting point for route - stop
coord
- destination point of route - waypoints
array
- list of watypoints to test
hm:detour(start, stop, waypoints) ⇒ Promise
Compute the detour for each waypoint provided, compared to normal route from A to B
Kind: global function
Returns: Promise
- returns {reference: {start, stop, distance, distance2, time, time2} ,waypoints:[ {coord, distA, timeA, distB, timeB}]}
Params
- start
coord
- starting point for route - stop
coord
- destination point of route - waypoints
array
- list of watypoints to test
hm:geocode(address, opt) ⇒ Promise
geocode an address
Kind: global function
Returns: Promise
- {coord,body}. coord is geocode as [lat,lng]. body is full json answer
Params
- address
string
- address as string - opt
object
- optional additional parameter, for instance {additionaldata:"IncludeShapeLevel,city"}
Example
const res = await hm.geocode("avenue des chaps elysees, paris");
console.log (res.coord);
hm:geocode(address, opt) ⇒ Promise
geocode an address
Kind: global function
Returns: Promise
- {coord,body}. coord is geocode as [lat,lng]. body is full json answer
Params
- address
string
- address as string - opt
object
- optional additional parameter, for instance {additionaldata:"IncludeShapeLevel,city"}
Example
const res = await hm.geocode("avenue des chaps elysees, paris");
console.log (res.coord);
hm:geocoderAutocomplete(opt) ⇒ Promise
reverse geocode a coordinate. Can centered on a location or within a bounding box
Kind: global function
Returns: Promise
- returns [{},{}]
Params
- opt
Object
- {query, bb or center}- .search
String
- text to search - .center
array
- [lat,lng] - .bb
object
- {latm,latM,lngm,lngM}
- .search
hm:geocoderAutocomplete(opt) ⇒ Promise
reverse geocode a coordinate. Can centered on a location or within a bounding box
Kind: global function
Returns: Promise
- returns [{},{}]
Params
- opt
Object
- {query, bb or center}- .search
String
- text to search - .center
array
- [lat,lng] - .bb
object
- {latm,latM,lngm,lngM}
- .search
hm:getAvailableMapStyle() ⇒ json
list of all available map styles normal.day, night....
Kind: global function
Returns: json
- list of map styles as json
hm:getAvailableMapStyle() ⇒ json
list of all available map styles normal.day, night....
Kind: global function
Returns: json
- list of map styles as json
hm:getCenter() ⇒ coord
return coordinate of the center of the map
Kind: global function
Returns: coord
- coord of the center as [lat,lng]
hm:getCenter() ⇒ coord
return coordinate of the center of the map
Kind: global function
Returns: coord
- coord of the center as [lat,lng]
hm:getDefaultLayers() ⇒ object
return default layers, created by _platform.createDefaultLayers();
Kind: global function
Returns: object
- defaultlayer
hm:getDefaultLayers() ⇒ object
return default layers, created by _platform.createDefaultLayers();
Kind: global function
Returns: object
- defaultlayer
hm:getPlatform() ⇒ object
return platorm;
Kind: global function
Returns: object
- platform
hm:getPlatform() ⇒ object
return platorm;
Kind: global function
Returns: object
- platform
hm:getThrottleLimits() ⇒ string
get Throttle limts for various modules
Kind: global function
Returns: string
- object with various limitsl
hm:getThrottleLimits() ⇒ string
get Throttle limts for various modules
Kind: global function
Returns: string
- object with various limitsl
hm:getViewBB() ⇒ Object
return bounding box of visible part of map
Kind: global function
Returns: Object
- bouding box of visible part of the map, as [latm,latM,longm,lngM]
hm:getViewBB() ⇒ Object
return bounding box of visible part of map
Kind: global function
Returns: Object
- bouding box of visible part of the map, as [latm,latM,longm,lngM]
hm:getZoom() ⇒ number
return zoom value
Kind: global function
Returns: number
- zoom level
hm:getZoom() ⇒ number
return zoom value
Kind: global function
Returns: number
- zoom level
hm:htmlBounding() ⇒ object
provide bounding box of element hosting map, relative to window
Kind: global function
Returns: object
- {top,left,width, height} relative to window
hm:htmlBounding() ⇒ object
provide bounding box of element hosting map, relative to window
Kind: global function
Returns: object
- {top,left,width, height} relative to window
hm:isoline(opt) ⇒ Promise
compute an isoline. See more info on optional parameters
Kind: global function
Returns: Promise
- returns { poly:array, body:object }. Poly is array of coords, body is full answer
Params
- opt
object
- option for isoline- [.start]
coord
- coord for starting point of isoline - [.destination]
coord
- coord for destination point of isoline - [.rangeType]
string
= "\"time\""
- time or distance - [.range]
number
- range in seconds or in meters - [.mode]
String
= "fastest;car;traffic:disabled"
- routing mode - [.linkattributes]
String
= sh
- attributes to be returned
- [.start]
hm:isoline(opt) ⇒ Promise
compute an isoline. See more info on optional parameters
Kind: global function
Returns: Promise
- returns { poly:array, body:object }. Poly is array of coords, body is full answer
Params
- opt
object
- option for isoline- [.start]
coord
- coord for starting point of isoline - [.destination]
coord
- coord for destination point of isoline - [.rangeType]
string
= "\"time\""
- time or distance - [.range]
number
- range in seconds or in meters - [.mode]
String
= "fastest;car;traffic:disabled"
- routing mode - [.linkattributes]
String
= sh
- attributes to be returned
- [.start]
hm:layerCreate(name, visible)
create a layer
Kind: global function
Params
- name
string
- name of layer - visible
boolean
- initial status
Example
hm.layerCreate("layer1");
hm:layerCreate(name, visible)
create a layer
Kind: global function
Params
- name
string
- name of layer - visible
boolean
- initial status
Example
hm.layerCreate("layer1");
hm:layerDelete(name)
delete a layer
Kind: global function
Params
- name
String
- name of layer
hm:layerDelete(name)
delete a layer
Kind: global function
Params
- name
String
- name of layer
hm:layerEmpty(layer)
Empty a layer, or create it if not existing
Kind: global function
Params
- layer
string
hm:layerEmpty(layer)
Empty a layer, or create it if not existing
Kind: global function
Params
- layer
string
hm:layerFind(name)
find layer by its name or return null
Kind: global function
Params
- name
string
hm:layerFind(name)
find layer by its name or return null
Kind: global function
Params
- name
string
hm:layerSetVisibility(name, visible)
create a layer
Kind: global function
Params
- name
string
- name of layer - visible
boolean
- visible or not
Example
hm.layerVisible("layer1",true);
hm:layerSetVisibility(name, visible)
create a layer
Kind: global function
Params
- name
string
- name of layer - visible
boolean
- visible or not
Example
hm.layerVisible("layer1",true);
hm:linkid(linkid) ⇒ Promise
get linkid Information, based on routing
Kind: global function
Returns: Promise
- - promise with {summary, coords, route ,body}
Params
- linkid
int
- linkid for which information is needed
hm:linkid(linkid) ⇒ Promise
get linkid Information, based on routing
Kind: global function
Returns: Promise
- - promise with {summary, coords, route ,body}
Params
- linkid
int
- linkid for which information is needed
hm:locateMe(callback, opt)
watch position on HTML5 position. This requires HTTPS. Creates layer "_gps". To deactivate, call with null callback
Kind: global function
Params
- callback
function
- callback when coord changes. Format: callback(coord,accuracy) - opt
Object
- optional graphic options- [.position]
object
- graphic options for center. See buildIcon- [.svg]
string
- svg file - [.color]
string
- color for {color} tag - [.size]
number
- size of icon - [.anchor]
number
- anchor of icon
- [.svg]
- [.accuracy]
object
- graphic options for accuracy representation- [.strokeColor]
String
- color of circle line representing accuracy area - [.lineWidth]
number
- width of line of circle - [.fillColor]
String
- fill color of circle representing accuracy area
- [.strokeColor]
- [.position]
hm:locateMe(callback, opt)
watch position on HTML5 position. This requires HTTPS. Creates layer "_gps". To deactivate, call with null callback
Kind: global function
Params
- callback
function
- callback when coord changes. Format: callback(coord,accuracy) - opt
Object
- optional graphic options- [.position]
object
- graphic options for center. See buildIcon- [.svg]
string
- svg file - [.color]
string
- color for {color} tag - [.size]
number
- size of icon - [.anchor]
number
- anchor of icon
- [.svg]
- [.accuracy]
object
- graphic options for accuracy representation- [.strokeColor]
String
- color of circle line representing accuracy area - [.lineWidth]
number
- width of line of circle - [.fillColor]
String
- fill color of circle representing accuracy area
- [.strokeColor]
- [.position]
hm:map(htmlItem, opt)
create a map area within the specified item
Kind: global function
Params
- htmlItem
string
- identifier of html div item on which to insert map - opt
object
- options- [.zoom]
number
= 10
- zoom factor - [.center]
Coord
= [48.86, 2.3]
- Coord of the center - [.scheme]
string
= "normal.day.grey"
- any scheme defined by HERE, plus "satellite", "japan", "korea", "black", "white", "transparent". For japan/korea, one needs special credentials as APP_ID_JAPAN APP_KOREA APP_CODE_JAPAN APP_CODE_KOREA - [.click]
function
- callback on mouse click: callback(coord,button,key) - [.dbClick]
function
- callback on mouse double click: callback(coord,button,key) - [.clickLeft]
function
- callback on mouse click left: callback(coord,button,key) - [.clickRight]
function
- callback on mouse click right.: callback(coord,button,key) - [.keyDown]
function
- callback on key down : callback(key) - [.viewChange]
function
- callback if map is panned or zoomed : callback(zoom,coordCenter) - [.loadTile]
function
- callback when a tile is loaded : callback(z,x,y,url) - [.rendered]
function
- callback when render is completed : callback(event)
- [.zoom]
Example
const hm = window.heremap;
hm.config({
app_id: "YOUR APP_ID",
app_code: "YOUR APP_CODE",
});
hm.map("map", {
zoom:5,
center: [48.8,2.3],
click: function(coord,button,key) {console.log("clicked on",coord,"with button",button);}
});
hm:map(htmlItem, opt)
create a map area within the specified item
Kind: global function
Params
- htmlItem
string
- identifier of html div item on which to insert map - opt <code