1.0.8 • Published 2 years ago
@greensoft/greencity-components v1.0.8
GreenCity Components
MapComponent
Description
Renders a map on specified target element with specified options
Options:
- center - default map location, ex: 25, 46
- zoom - default map zoom, ex: 5
- wfsUrl - url to wfs service
- layers - layers config
- onClick - click handler event : {lon, lat} or {feature}
Usage:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="map" class="map" style="width: 800px; height: 800px;"></div>
<div id="info">Click on map</div>
<script src="main.js" type="module"></script>
</body>
</html>main.js
import 'ol/ol.css';
import 'ol-ext/dist/ol-ext.css';
import {MapComponent} from "@greensoft/greencity-components";
new MapComponent('map', {
center: [25, 46],
zoom: 6,
wfsUrl: 'http://geoserver/wfs',
layers: [
{
title: 'Bănci',
name: 'Sector6:banca',
style: {
type: 'circle',
radius: 5,
fill: {
color: 'red'
},
stroke: {
color: 'black',
width: 1
}
}
},
{
title: 'Coșuri gunoi',
name: 'Sector6:cos-gunoi',
style: {
type: 'circle',
radius: 5,
fill: {
color: 'black'
},
stroke: {
color: 'black',
width: 1
}
},
popup: {
title: 'tip_desc',
attributes: {
'id': {
title: '#'
},
'tip_cod': {
title: 'Tip Cod'
},
'tip_desc': {
title: 'Tip Descriere'
},
}
}
}
],
onClick: function(event) {
console.log('map event', event);
document.getElementById('info').innerHTML = JSON.stringify(event);
}
});package.json
{
"name": "greencity-component-demo",
"dependencies": {
"@greensoft/greencity-components": "^1.0.6"
},
"devDependencies": {
"parcel": "^2.0.0"
},
"scripts": {
"start": "parcel index.html --no-cache",
"build": "parcel build --public-url . index.html"
}
}