1.1.3 • Published 10 months ago
gna-map v1.1.3
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-map3. 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/gna-map@1.1.0/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. */
}