nanotera-map
v0.0.5
Published
This map claims to fetch iriszones on french country and display it on map
Readme
NanoteraMap
This map claims to fetch iriszones on french country and display it on map
Install
yarn add nanotera-mapProps
type NanoTeraMapType = {
/*
* Mapbox accesstoken
* Info: https://docs.mapbox.com/api/accounts/tokens/#token-format
* eg: pk.eyJ******
*/
accesstoken: string;
/*
* The address you want to display the data
* The format of the address should be formatted like this:
* eg: 5 Boulevard de Bonne Nouvelle, Paris
*/
address: string;
/*
* The iris zones you want to display on initial render
* ex: ["751103806", "751020702"]
*
*/
irisZones: string[];
/*
* The opts for mapbox
* zoom: initial zoom of the map
* minZoom: minimal zoom on the map
* maxZoom: maximum zoom on the map
* center: coordinates latitude/longitude
*/
opts?: {
zoom?: number;
minZoom?: number;
maxZoom?: number;
center?: number[];
};
};Event
type UpdateMap = {
// array of iris zones
irisZones: string[];
// count of iriszones clicked
clickedZones: number;
// get population adult >= 18
populationCount: number;
};
/*
const el = document.querySelector('updated:map', (e) => {
console.log(e.detail) // type UpdateMap
})
*/Usage
Example with React
// NanoTeraMap.tsx
import React from "react";
import "nanotera-map";
import "nanotera-map/dist/style.css";
import type { NanoTeraMapType } from "nanotera-map";
const NanoTeraMap = ({
accesstoken,
address,
irisZones,
opts,
}: NanoTeraMapType) => {
const ref = React.useRef<HTMLElement | null>(null);
React.useEffect(() => {
ref.current?.addEventListener("updated:map", (e) => {
console.log(e.detail);
});
}, []);
return (
<nanotera-map-element
ref={ref}
address={address}
accesstoken={accesstoken}
irisZones={irisZones}
options={JSON.stringify(opts)}
></nanotera-map-element>
);
};
export default NanoTeraMap;// App.tsx
import NanoTeraMap from "./NanoTeraMap";
const App = () => {
return (
<>
<NanoTeraMap
address="5 Boulevard de Bonne Nouvelle, Paris"
accesstoken="<mapboxtoken>"
irisZones={["751103806", "751020702"]}
/>
</>
)
}Example with vanilla js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nanotera map</title>
</head>
<body>
<nanotera-map-element accesstoken="token"
address="5 Boulevard de Bonne Nouvelle, Paris"
irisZones={["751103806", "751020702"]}
></nanotera-map-element>
<script defer type="text/javascript" src="./path/to-map.js"></script>
<script>
const map = document.querySelector('nanotera-map-element')
map.addEventListener('updated:map', (e) => {
console.log(e.detail)
})
</script>
</body>
</html>