MapManager is a TypeScript library, which simplifies usage of OpenLayers in GIS projects
MapManager depends on OpenLayers, ol-ext, proj4, turf and axios libraries
npm install @bingo_soft/mapmanager
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="map"></div>
<script src="index.ts"></script>
</body>
</html>style.css
body, html {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 100%;
min-height: 100%;
width: 100%;
background-color: #f9f9f9;
}
#map {
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #eee;
z-index: 1;
}index.ts
import MapManager from "../../src/MapManager";
import Map from "../../src/Domain/Model/Map/Map";
import BaseLayer from "../../src/Domain/Model/Map/BaseLayer";
/* Create and initialize map */
const optsMap = {
base_layer: BaseLayer.OSM,
declared_coordinate_system_id: 3857,
center: {
x: 44.008741,
y: 56.319241,
declared_coordinate_system_id: 4326
},
zoom: 13
}
const map: Map = MapManager.createMap("map", optsMap);Explore examples to learn how to use the library
cd examples
npm install
npm run build
OR
npm run serve
Then go to localhost:8081 and navigate multiple examples
