@visual-elements/location-map

How to use the everviz location map library:

Add the following to the head of your html page:

<head>
    <script src="https://app.everviz.com/resources/location-map/bundle/EvervizLocationMap.v0.iife.js"/>
    <link rel="stylesheet" type="text/css" href="https://app.everviz.com/static/fonts/gordita/style.css"/>

    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

Add the following to the div tag with an id. The location map constructor will use this id to render the map to this div

<div id="everviz-" style="width: 100%; height: 100%; margin: 0 auto"></div>

Create the options for the everviz location map and call the everviz location map constructor with these options. A full documentation of the config options can be found here

              
const options = {
    "theme": {
        "type": "dynamic",
        "url": "https://app.everviz.com/resources/location-map/themes/basic.json"
    },
    "fullScreenControls": {
        "enabled": true
    },
    "customAttribution": {
        "text": "everviz"
    },
    "version": "0",
    "viewState": {
        "referenceHeight": 471,
        "referenceWidth": 471,
        "bearing": 0,
        "center": [
            8.787665300000526,
            61.152938600000226
        ],
        "pitch": 0,
        "zoom": 10.857215436584328
    },
    "exporting": {
        "sourceWidth": null,
        "sourceHeight": null
    },
    "markers": [
        {
            "id": "BZKNnIOw",
            "icon": {
                "enabled": true,
                "type": "svg",
                "size": 52,
                "src": "<svg viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"><pathd="M11.6673 33.5876C5.61414 27.5345 5.61414 17.7204 11.6673 11.6673C17.7204 5.61416 27.5344 5.61416 33.5876 11.6673C39.6407 17.7204 39.6407 27.5345 33.5876 33.5876L22.6274 44.5478L11.6673 33.5876Z"fill="#BC094A"stroke="white"/><circle cx="23" cy="20" r="6" fill="white" /></svg>"
            },
            "connector": {
                "enabled": false
            },
            "editorOptions": {
                "enableRotation": false,
                "isGrouped": true
            },
            "label": {
                "enabled": true,
                "anchor": "center-left",
                "text": "Norway",
                "style": {
                    "textAlign": "center",
                    "font": "normal 1rem "Gordita", "Arial", sans-serif",
                    "color": "#172B4C",
                    "lineHeight": "1.5rem",
                    "paddingBottom": "6px",
                    "paddingTop": "6px",
                    "paddingLeft": "16px",
                    "paddingRight": "28px",
                    "border": "1px solid #ccc",
                    "borderRadius": "1px",
                    "backgroundColor": "white",
                    "boxShadow": "0 2px 4px rgba(0, 0, 0, 0.1)"
                }
            },
            "rotation": 0,
            "data": {
                "type": "static",
                "content": {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "type": "Point",
                        "coordinates": [
                            8.7876653,
                            61.1529386
                        ]
                    }
                }
            }
        }
    ],
}

let map = new EvervizLocationMap("everviz-", options, (ref) => {
    console.log(ref);
})

How to use the everviz location map library:

Settings