Optional bearingOptional centerYou can set the location of the center of the map by setting the center parameter. By example if you want to center the map on the city of Ottawa :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
center: {
x: -75.6981200,
y: 45.4111700
}
}
}
</script>
...
</body>
</html>
Optional containerWhen the JMap Server NG Core library start it will create or use an existing div container in which the map will be inserted into.
By default the div container id is "jmap-map", but you can set the id of your choice like that :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
containerId: "my-custom-container-id"
}
}
</script>
<div id="my-custom-container-id"></div>
</body>
</html>
In the above example the map will be inserted in the div having "my-custom-container-id" as id. You need to set the width and the height of this div by yourself.
If no container is found in the DOM with the specified id, JMap Server NG Core library will create and append it automatically in the body element of the web page.
Optional extentThe map will zoom and pan to fit exactly the extent :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
extent: {
sw: { x: 12.4, y: 45.34 },
ne: { x: 24.4, y: 55.34 }
}
}
}
</script>
...
</body>
</html>
Optional googleIf a Google Maps API key is set through the JMap Admin interface, the JMap Server NG Core library will use it automatically, nothing else to do for you.
The Google Maps API key is used by JMap Server NG in order to display Google basemaps and to use other Google related functionalities.
In order to use Google basemaps, you need to enable the Map Tiles API in your Google account. See the documentation for more details about this
If no Google Maps API key is set in JMap Admin, or if you want to use the Google Maps API key of your choice, you have to set the "googleMapsApiKey" parameter :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
googleMapsApiKey: "google-maps-api-key"
}
}
</script>
...
</body>
</html>
Optional mapBy default the Map Rotation control is not visible.
But if mapRotationControlVisible is true, it will be displayed on the map.
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
mapRotationControlVisible: true,
}
}
</script>
...
</body>
</html>
Optional mapboxIf a mapbox token is set through the JMap Admin interface, the JMap Server NG Core library will use it automatically, nothing else to do for you.
The mapbox token is used by JMap in order to fully use mapbox capabilities like displaying a mapbox base maps or using mapbox geocoding.
But if no token is set in JMap Admin, or if you want to use the mapbox token of your choice, you have to set the "mapboxToken" parameter :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
mapboxToken: "dfqwdhjgqdhdh4567sjdvhbh"
}
}
</script>
...
</body>
</html>
Optional navigationBy default the Navigation History control is not visible.
But if navigationHistoryControlVisible is true, it will be displayed on the map.
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
navigationHistoryControlVisible: true,
}
}
</script>
...
</body>
</html>
Optional onYou can execute a custom piece of code at runtime, after the map is ready, and only one time at JMap Server NG Core library startup.
For that you have to set the "onStartupMapReadyFn" parameter which is a function. Here an example that will display a message "Hello the map is ready !" in the console :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
onStartupMapReadyFn: map => {
console.log("Hello the map is ready !", map)
}
}
}
</script>
...
</body>
</html>
Optional rotationYou can set the initial rotation of the map by setting the rotation parameter. This parameter will have the priority over bearing if both parameters are specified. By example if you want the map to open with a clockwise rotation of 90 degree :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
rotation: 90,
}
}
</script>
...
</body>
</html>
Optional scaleYou can choose the position of the scale control on the map.
Use a value in : "top-left", "top-right", "bottom-left", or "bottom-right"
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
scaleControlPosition: "bottom-right"
}
}
</script>
...
</body>
</html>
Optional scaleThis is the unit in which the scale control panel will display the data.
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
scaleControlUnit: "imperial"
}
}
</script>
...
</body>
</html>
Optional scaleBy default the scale control panel it is not visible.
But if scaleControlVisible is true, it will be displayed on the map.
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
scaleControlVisible: true,
}
}
</script>
...
</body>
</html>
Optional searchWill execute a search by attribute on the layer, then pan and zoom to display the result. Check for features having the property equals to the value. If showMapPopup is true and that only one attributeValue is specified and that only one feature is found, the feature's Mouseover info will be displayed if defined
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
search: {
layerId: 2,
attributeName: "PEC",
attributeValue: "RT 2012",
showMapPopup: true
}
}
}
</script>
...
</body>
</html>
Optional zoomYou can zoom to a custom level by setting the "zoom" variable. Here an example :
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
map: {
zoom: 4.32
}
}
</script>
...
</body>
</html>
You can set the initial rotation of the map by setting the bearing parameter. This parameter will be ignored if rotation is specified. By example if you want the map to open with a anticlockwise rotation of 90 degree :