I have an google-maps_pin.svg
file which represents a google-maps pin.
I would like to color the different markers (generated with v-for) based on categories (restaurant, art gallery, etc.) dynamically.
Is there a way to achieve that with vue2 leaflet?
Here’s my map:
<l-map style="z-index: 0" ref="mapRef" :zoom="zoom" :center="center" @update:zoom="zoomUpdated" @update:center="centerUpdated" @update:bounds="boundsUpdated"> <l-tile-layer :url="url"></l-tile-layer> <l-marker v-for="(markedLocation, index) in marker" :key="'marker-' + index" :lat-lng="markedLocation.location" :icon-url="require('@/assets/googlemaps_markers/google-maps_pin.svg')"> </l-marker> </l-map>
The color I want to give to the individual pins is stored in markedLocation.info.category.color
variable.
Advertisement
Answer
Yes you can implement by using this property L.divIcon().
Represents a lightweight icon for markers that uses a simple
<div>
element instead of an image. Inherits from Icon but ignores the iconUrl and shadow options.
Your template will be like bellow
<div id="app"> <l-map :zoom="zoom" :center="center"> <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer> <l-marker v-for="(item, index) in markers" :key="'marker-' + index" :lat-lng="item.location" :icon="getIcon(item)"></l-marker> </l-map> </div>
and your getIcon()
method will be like this
getIcon(item) { return L.divIcon({ className: "my-custom-pin", html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 34.892337" height="60" width="40"> <g transform="translate(-814.59595,-274.38623)"> <g transform="matrix(1.1855854,0,0,1.1855854,-151.17715,-57.3976)"> <path d="m 817.11249,282.97118 c -1.25816,1.34277 -2.04623,3.29881 -2.01563,5.13867 0.0639,3.84476 1.79693,5.3002 4.56836,10.59179 0.99832,2.32851 2.04027,4.79237 3.03125,8.87305 0.13772,0.60193 0.27203,1.16104 0.33416,1.20948 0.0621,0.0485 0.19644,-0.51262 0.33416,-1.11455 0.99098,-4.08068 2.03293,-6.54258 3.03125,-8.87109 2.77143,-5.29159 4.50444,-6.74704 4.56836,-10.5918 0.0306,-1.83986 -0.75942,-3.79785 -2.01758,-5.14062 -1.43724,-1.53389 -3.60504,-2.66908 -5.91619,-2.71655 -2.31115,-0.0475 -4.4809,1.08773 -5.91814,2.62162 z" style="fill:${item.color};stroke:${item.strokeColor};"/> <circle r="3.0355" cy="288.25278" cx="823.03064" id="path3049" style="display:inline;fill:${item.circleColor};"/> </g> </g> </svg>` }); }
You could check here with working JS fiddle and please see below screenshot taken from JS fiddle.