# custom pins for MapView

**URL:** <https://forums.fusetools.com/t/custom-pins-for-mapview/5481>\
**Category:** Feature Suggestions\
**Created:** [May 16, 2016, 8:01pm UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481 "2016-05-16T20:01:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [May 16, 2016, 8:01pm UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/1 "2016-05-16T20:01:52Z")

</div>

It would be great to have custom pin (marker) design for MapView. Think of examples such as Foursquare, where they add custom graphics to the pins, for example: [https://www.dropbox.com/s/qyicbhiimwh27ja/Screenshot%202016-05-16%2022.56.48.png?dl=0](https://www.dropbox.com/s/qyicbhiimwh27ja/Screenshot%202016-05-16%2022.56.48.png?dl=0)

To fully use the flexibility of Fuse UX with Panels etc., something along these lines should be doable:

```auto
<MapView>
    <MyMarker Icon="Elephant.png">
       ...

```

and, respectively:

```auto
<Panel ux:Class="MyMarker">
  <FileImageSource ux:Property="Icon" />
  <Image File="{Property this.Icon}" />
</Panel>

```

A quick google search for “ios map custom pin” shows something about Mapkit. Stackoverflow seems to know what’s up with that. Android seems to have everything one might need right out-of-the-box: [https://developers.google.com/maps/documentation/android-api/marker](https://developers.google.com/maps/documentation/android-api/marker)

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [May 24, 2016, 11:22pm UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/2 "2016-05-24T23:22:16Z")

</div>

Yeah this was one of the first things we put down as a feature we should have, but it is unfortunately pretty complicated to solve in an easy way that is also cross plat. Right now for instance pin views are causing layout problems on iOS just in general, so I don’t think we’ll get to this feature until the MapView behaves exactly as intended with the current level of functionality.

This kind of falls in line with custom map overlays and so forth in terms of feature complexity; It’s tempting to suggest we finish an easier way to extend and alter the mapview delegate on iOS and the googlemap instance on Android through user foreign code rather than pursue a common “Fuse API”, though time will tell.

But, as I said, we are actively considering stuff like this when opportunities arise.

---

<div class="post-metadata">

**Author:** ![lg1](https://avatars.discourse-cdn.com/v4/letter/l/cdc98d/32.png) [@lg1](https://forums.fusetools.com/u/lg1)\
**Post date:** [July 21, 2016, 4:09pm UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/3 "2016-07-21T16:09:28Z")

</div>

Before you implement something complex, is it possible to add a simple image to the MapMarker?

```auto
<MapView>
    <MapMarker Latitude="59.911567" Longitude="10.741030" Image="marker.png"/>
</MapView>

```

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [July 26, 2016, 10:46am UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/4 "2016-07-26T10:46:10Z")

</div>

You mean as a replacement graphic for the pin?

---

<div class="post-metadata">

**Author:** ![John](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@John](https://forums.fusetools.com/u/John)\
**Post date:** [July 26, 2016, 11:23am UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/5 "2016-07-26T11:23:45Z")

</div>

That would be awesome, for the first step. We could then use {marker} instead of marker.png to achieve great things :)))

Also is there a trigger for the “label-overlay” on marker-clicked. I have got a custom animation. I would like to trigger that with marker\_clicked and “detrigger” on map\_marker, focus lost. So it behaves exact the same way as your label overlay…

Thanks in advance

---

<div class="post-metadata">

**Author:** ![lg1](https://avatars.discourse-cdn.com/v4/letter/l/cdc98d/32.png) [@lg1](https://forums.fusetools.com/u/lg1)\
**Post date:** [July 26, 2016, 4:33pm UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/6 "2016-07-26T16:33:38Z")

</div>

> **Andreas Rønning wrote:**
> 
> You mean as a replacement graphic for the pin?

Yes, using a custom graphics for the pin would be very usefull. Also for android its very desired to allow to hide a toolbar with ‘Navigate’ and ‘Open in Maps’ buttons And add ‘showsUserLocation’ and ‘followsUserLocation’ - default marker with user location

---

<div class="post-metadata">

**Author:** ![TouPilsner](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@TouPilsner](https://forums.fusetools.com/u/TouPilsner)\
**Post date:** [February 19, 2017, 10:34am UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/7 "2017-02-19T10:34:00Z")

</div>

Any ETA or update on this feature?

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [March 7, 2017, 2:27am UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/8 "2017-03-07T02:27:49Z")

</div>

Yep, it’s [been in Fuse for a while now](https://www.fusetools.com/docs/fuse/controls/mapmarker/iconfile) 🙂

---

<div class="post-metadata">

**Author:** ![TouPilsner](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@TouPilsner](https://forums.fusetools.com/u/TouPilsner)\
**Post date:** [March 20, 2017, 5:01pm UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/9 "2017-03-20T17:01:52Z")

</div>

@Andreas Rønning it does not seem that MapMarker.IconFile is available in JS?

MapView.setMarkers(markers) Method (JS)

{  
latitude: 0,  
longitude: 0,  
label: “Hello, world!”  
}

[https://www.fusetools.com/docs/fuse/controls/mapview/setmarkers\_3f078864](https://www.fusetools.com/docs/fuse/controls/mapview/setmarkers_3f078864)

---

<div class="post-metadata">

**Author:** ![Andreas\_Ronning](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/andreas_ronning/32/303_2.png) [@Andreas\_Ronning](https://forums.fusetools.com/u/Andreas_Ronning)\
**Post date:** [March 21, 2017, 9:41pm UTC](https://forums.fusetools.com/t/custom-pins-for-mapview/5481/10 "2017-03-21T21:41:39Z")

</div>

This will be fixed in an upcoming release. On a best practises note, you will be better off eaching over a collection and using UX MapMarker nodes as your data transform rather than setting the markers via this method. It’ll free your JS property names from the UX node names and reduce your JS dependency on the UX. Personally I’d avoid accessing UX nodes through JS like this in nearly every single case.
