custom pins for MapView

Feature Suggestions
1

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

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

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

and, respectively:

<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

2

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.

3

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

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

You mean as a replacement graphic for the pin?

5

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

6

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

7

Any ETA or update on this feature?

8

Yep, it’s been in Fuse for a while now :slight_smile:

9

@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

10

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.