Openlayers-component NPM

openlayers-wrapper-polymer3

Add maps into your application or page in an easy way 🌎

Installation

npm

npm install --save openlayers-component

unpkg

You can add the following in the \<head> of your html :

<script src="https://unpkg.com/openlayers-component@${version}/dist/main.js"></script>

Usage

Add the custom element tag where you want to show the map

<openlayers-map></openlayers-map>

You can add attributes to configure the initial view and the source of your base layer

<openlayers-map
   view-lon="-60.712829"
   view-lat="-31.641445"
   view-zoom="14"
   tile-source="http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
>
</openlayers-map>

Size

Place the custom element in a div with the desired dimensions

<div class="map-container" style="width:100%;height: 300px;">
	<openlayers-map></openlayers-map>
</div>

Updating view dynamically

You can modify the view programatically, changing element attribute values

const map = document.querySelector("#map1");
map.setAttribute("view-lon","-60.62");
map.setAttribute("view-lat","-31.62");
map.setAttribute("view-zoom","11");

Add markers dinamically

const map = document.querySelector("#map1");
map.appendChild(new MapMarker({longitude:-60.698051,latitude: -31.614810, color:"#FFDC45"}));
map.appendChild(new MapMarker({longitude:-60.721049,latitude: -31.654999, color:"#46E8D4"})); 
map.appendChild(new MapMarker({longitude:-60.711903,latitude: -31.662787, color:"#0090FE"}));

openlayers map webcomponents polymer3

@polymer/polymer ol ol-ext

@infinitebrahmanuniverse/nolb-openl @everything-registry/sub-chunk-2383 @zalastax/nolb-openl

4 years ago

4 years ago

4 years ago

4 years ago