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><div id="map-container-id"></div>
<script src="https://unpkg.com/gna-map@latest/dist/gna-map.umd.js"></script>
<script>
//...your code
</script>npm i gna-mapGNAMap.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
});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
});- 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.
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>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. */
}