You 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>When the JMap 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 Core library will create and append it automatically in the body element of the web page.
The 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>By 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>If a mapbox token is set through the JMap Admin interface, the JMap 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.
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>By 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>You can execute a custom piece of code at runtime, after the map is ready, and only one time at JMap 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>You 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>You 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>This 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>By 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>Will 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>You 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 :
<html> ... <body> <script type="text/javascript"> window.JMAP_OPTIONS = { ... map: { bearing: 90, } } </script> ... </body> </html>