0.0.5 • Published 2 years ago
nanotera-map v0.0.5
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>0.0.5
2 years ago
0.0.4-alpha-0.0.3
2 years ago
0.0.4-alpha-0.0.2
2 years ago
0.0.4-alpha-0.0.1
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago