<openlayers-map/> 🌎

Web component for include maps in your apps and pages in an easy way

View in npm View in github

Simple Map

Simple map centered in a point with zoom

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

Custom Markers

This maps allows you to point easily custom markers

<openlayers-map 
    view-lon="-60.712829" 
    view-lat="-31.641445" 
    view-zoom="12"
    tile-source="http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png">
        <map-marker 
            slot="marker" 
            m-longitude="-60.712829" 
            m-latitude="-31.64144">
        </map-marker>
        <map-marker 
            slot="marker" 
            m-longitude="-60.681147" 
            m-latitude="-31.640089" 
            m-color="#73BBFF">
        </map-marker>
        <map-marker 
            slot="marker" 
            m-longitude="-60.673697" 
            m-latitude="-31.633669" 
            m-color="#5FFF82">
        </map-marker>
</openlayers-map>

Locate Me Control

Show the position using geolocation API

<openlayers-map locate-me-control="true"/>

Wikimedia Source

This maps use wikimedia as source

<openlayers-map 
    view-lon="103.847627" 
    view-lat="1.353661" 
    view-zoom="7"
    tile-source="https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png">
</openlayers-map>