gna-map

v1.1.3

Published

3 months ago

Add to your website stylesheets.

Downloads

0High
0Medium
0Low

rudziktv

francesco.marucci

How to install and use gna-map package

1. Import stylesheets

Add to your website stylesheets.

<head>
    <!-- Your HTML Head... -->
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    />
    <link
        rel="stylesheet"
        href="https://unpkg.com/gna-map@latest/dist/style.css"
    />
    <!-- Your HTML Head... -->
</head>

2. Install package

Using script tag

<div id="map-container-id"></div>
<script src="https://unpkg.com/gna-map@latest/dist/gna-map.umd.js"></script>
<script>
    //...your code
</script>

Using npm in NodeJS

npm i gna-map

3. Use package

Vanilla JS (without Node)

GNAMap.initMap("map-container-id", {
    width: "100%", // define width of widget (default 100%)
    //width: undefined, // pass undefined instead of value if you want to control it with .css
    height: "100vh", // define height of widget (default 100vh)
    //height: undefined, // pass undefined instead of value if you want to control it with .css
    mapType: "gna", // default map
});

NodeJS

import { initMap } from "gna-map";

initMap("map-container-id", {
    width: "100%", // define width of widget (default 100%)
    //width: undefined, // pass undefined instead of value if you want to control it with .css
    height: "100vh", // define height of widget (default 100vh)
    //height: undefined, // pass undefined instead of value if you want to control it with .css
    mapType: "gna", // default map
});

4. Limitations

Map size cannot be 0! Be sure that map got some size.
Map size can be declared in css or in initMap function.
Map cannot be animated, it's rendered with selected size.
Minimal usable size - 600px width, 300px height.
Minimal recommended size - 800px width, 400px height.

5. Optional

UNPKG version tag

If you need you can force static version modyfing the link (just replace @latest, with desired version)

<script src="https://unpkg.com/[email protected]/dist/gna-map.umd.js"></script>

Modify CSS

This is only example. Only what you need is to overwrite Library's style tags in your own .css file. See style.css to understand which tags are used. Have fun!

.gna-buttons button {
    font-size: 16px; /* font-size: 22px; */
    width: 40px;
    height: 40px;
    /* You just need to overwrite desired property in specifeid tag. */
}