wc-g-map

• Description

This is a standard Web Component implemented by Stencil.js for rendering maps and functionalities based on the Google Maps API

• Start using the component

The first thing is to prepare the development framework in a way that allows the import and use of native Web Components. The Stencil documentation offers us the steps to be carried out for integration in various environments. Also at the bottom of the document you can find links to integration examples for Angular and Vue with live demos. Once the previous point is configured, we can start using the component simply using the reserved HTML tag wc-g-map. It is important to note that the apiKey attribute is mandatory, so it will be necessary to enter it for the map rendering and the correct performance of all the functionalities it offers. The map renderization of the component does not have its own fixed size, so we must introduce it in a sized container. An example of minimum use could be as follows:

<div style="width: 750px; height: 600px">
    <wc-g-map api-key="apiKey"></wc-g-map>
</div>

• Properties

| Property | Attribute | Type | Default | | ----------- | ----------- | --------- | ----------- | | apiKey | api-key | string | undefined | | layers | layers | object | {} | | location | location | string | undefined | | mapexpand | mapexpand | boolean | true | | mapzoom | mapzoom | number | 5 | | markers | markers | array | [] | | polygon | polygon | object | {} | | initialpin| initialpin | boolean | true | | movablepin | movablepin | boolean | true | | markerslegend | markerslegend | boolean | false | | language | language | string | en | | minimal | minimal | boolean | false |

apiKey

API Key of Google Maps mandatory for the rendering of maps and the use of the different functionalities implemented, and therefore it is a necessary property for the operation of the component

layers

The component allows to select and change different ways of visualization of the map and the possibility of adding overhead layers that extend the information that is represented. These options are selectable through two optional combos. Different maps and layers are defined through an object that includes two object arrays, one for the maps and other one for the layers. It's important to set the first layer as "No Layer", because this will the combo option to select if we want to remove another layer selected previously. An example structure has the following form:

layerlist = {
    maps: [
        {
            name: 'Google',
            options: {
                isPng: true,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'OpenStreet',
            options: {
                isPng: true,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'Grey',
            options: {
                isPng: true,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'Perspective',
            options: {
                isPng: true,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'PNOA',
            url: 'http://www.idee.es/wms/PNOA/PNOA?SERVICE=WMS&SRS=EPSG:4326&VERSION=1.1.1&LAYERS=pnoa&STYLES=default&FORMAT=image/jpeg',
            options: {
                isPng: true,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'Catastro',
            url: 'http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?SERVICE=WMS&VERSION=1.1.1&SRS=EPSG:4326&FORMAT=PNG&TRANSPARENT=No&LAYERS=catastro',
            options: {
                isPng: false,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'Cartociudad',
            url: 'http://www.ign.es/wms-inspire/ign-base?SERVICE=WMS&VERSION=1.1.1&SRS=EPSG:4326&FORMAT=image/png&TRANSPARENT=Yes&layers=IGNBaseTodo-nofondo',
            options: {
                isPng: false,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'SIOSE',
            url: 'http://servicios.idee.es/wms-inspire/ocupacion-suelo?SERVICE=WMS&VERSION=1.1.1&SRS=EPSG:4326&LAYERS=LC.LandCoverSurfaces&FORMAT=image/png&transparent=Yes',
            options: {
                isPng: false,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'FeatureInfo',
            url: 'http://54.76.22.98:8080/geoserver/test/wms?service=WMS&request=GetMap&layers=test:SeccionCensal&srs=EPSG:4326&FORMAT=image/png&transparent=Yes',
            options: {
                isPng: false,
                maxZoom: 20,
                minZoom: 1,
                width: 1024,
                height: 1024
            },
            featureInfo: {
                queryLayers: '',
                layers: '',
                auto: [{ lat: 3, lon: 40 }]
            }
        }
    ],
    layers: [
        {
            name: 'Sin capa',
            options: {
                isPng: false,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'Catastro',
            url: 'http://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?SERVICE=WMS&VERSION=1.1.1&SRS=EPSG:4326&FORMAT=PNG&TRANSPARENT=Yes&LAYERS=catastro',
            options: {
                isPng: false,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        },
        {
            name: 'Ponencias',
            url: 'http://ovc.catastro.meh.es/Cartografia/WMS/PonenciasWMS.aspx?SERVICE=WMS&SRS=EPSG:4326&format=PNG&transparent=Yes',
            options: {
                isPng: false,
                maxZoom: 20,
                minZoom: 1,
                width: 256,
                height: 256
            }
        }
    ]
}

location

It allows us to give an initial location to the map that includes the painting of a marker drop in the established coordinates. The property supports the string format of coords "<latitude>, <length>" or enter the address directly by text

mapexpand

It is a Boolean property that in case of true draws an icon on the map that allows us to expand it to full screen

mapzoom

Set an initial zoom level for the map. It is set by a number value following the standard levels of the Google Maps API

markers

The component allows you to draw markers on the map. Each marker is defined by an object that includes the following properties

• latLng: Defined by an array with latitude and longitude values [<latitude>, <length>]
• icon: The available icons are identified by a string that represents them and are predefined in the file ** constants **
• color: As in CSS, the color can be defined by its reserved word or by its corresponding hexadecimal code
• size: This is a numerical parameter that sets the size of the marker and will normally range between 50 and 100 as value
• infoType: Parameter that allows two values:
  • event: Clicking on the marker, it emits an event out of the component that must be picked up by the parent component and act accordingly. The event includes coordinates and info
  • info: The component itself creates an infoWindow of the clicked marker (modal window that shows more information about this). The information shown in that window is established in the following parameter: info
• info: Information that will be sent in the event in case of infoType: event, or that will be displayed in the infoWindow in the case of infoType: info
• zIndex: Useful if we want to make sure that a certain marker will be painted in the foreground so that it cannot be hidden by another marker or map element. We recommend setting the value of this property to a fairly high integer

The component will also support any other standard marker parameters allowed by the Google Maps API

The marker property will be defined by an array of marker objects

markers: [{
     latLng: [40.46366700000001, -3.7492200000000366],
     icon: 'bed' ,,
     color: 'green',
     size: 100,
     info: 'Info',
     infoType: 'event',
     zIndex: 9999
}]

polygon

The property is based on an array of objects that represent the points that delimit the edges of the polygon, and formed in each case by the corresponding longitude and latitude. The object could be defined as follows

var polygon = {
    polygon: [{
        "latitude": 40.293791666332936,
        "longitude": -3.7821800296843184
    }, {
        "latitude": 40.29391847632872,
        "longitude": -3.7820792762941409
    }, {
        "latitude": 40.294742559332889,
        "longitude": -3.7814493966320062
    }, {
        "latitude": 40.2949008358673,
        "longitude": -3.7813556035078988
    }, {
        "latitude": 40.295507295039343,
        "longitude": -3.7808742709968328
    }
	...
};

initialpin

If set to true, a green pin will be painted in the location passed as a property. Must be set to false to avoid this behavior

movablepin

If set to true, a green pin will be painted when clicking on a new location on the map. Must be set to false to avoid this behavior

markerslegend

If set to true, the map shows a legend at the bottom-left that describe the meaning of the three different colors that markers can have (low, medium or high unit value referred to that marker)

language

Can be set to 'es' (Spanish), 'en' (Default English) or 'it' (Italian) and serves to translate the legend texts to the established language

minimal

Shows a simplified version of the map that improves the vision of comparables by eliminating points of interest, landmarks and changing colors

Setting a property of the component is as straightforward as giving value to its corresponding attribute in the component's label. Ex:

<wc-g-map>
    location = "40.46366700000001, -3.7492200000000366"
    mapexpand = "true"
</wc-g-map>

Events

| Event | Trigger | Parameters in response | | --------------- | ----------- | -------------------------| | clickedMap | Click on the map | [<latitude>, <length>] | | clickedMarker | Click on marker | {gmarker: gmarker, coords: map.coords, info: marker.info} | | expand | Click expand map icon | isExpandedMap: boolean | | featureInfo | Click on the map | featureInfo.data | | getCoords | Changes in prop location | [<latitude>, <length>] | | getPolygon | "dragend", "insert_at", "set_at" | Paths that shape the polygon |

To proceed after receiving the event, we must program a function associated with it in the parent component as follows

<wc-g-map (clickedMarker)="getClickedMarker($event)"
 	(clickedMap)="clickedMap($event)">
 </wc-g-map>

We should create the functionality of the methods getClickedMarker and clickedMap receiving in the parameter $event the data that the events attached

Exposed methods (API)

| Method | Parameters | Description | | ---------------- | ------------ | -------------- | | focusOnMarker | coords, scale | Look for a marker in the coords passed as parameter, and in case of found it expands its size in the scale provided | | removeMarkers | - | Remove all markers currently drawn on the map | | startPolygon | Polygon coords | Draw a polygon from a structure similar to the one specified in the description of the polygon property | | removeMarker | "latitude, longitude" | Remove the marker that is located in the position (latitude, longitude) passed as parameter |

Marker Icons

The component marker maps icons are defined in folder data -> constants through the svg path of each icon. These designs has been downloaded form the page map-icons By default the paths of icons contains decimal values. If you want to reduce the complex and size of the path you can use the online tool SVG Path Editor, by simply importing the path and then use the Round to integers function. The icon design shouldn't change perceptibly

Environments

Configuration in Angular (Version 6+)

Configuration in Vue (Version 2+)