Mapbox Custom Marker

Question

I try to add a custom mapbox marker verbatim through their documentation examples, and it doesn't show on the map. No script errors, subsequent code runs, no indication of failure other than it just not being visible.

This is an ASP.NET MVC app, in my cshtml view I have:

L.mapbox.accessToken = 'my token';

var map = L.mapbox.map('map', 'my account').setView([32.361, -96.185], 6);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.keyboard.disable();

This is scripted at the copy of the document body and is working fine.

In my .js file (knockout), I have code that updates the map position after users enter an address. This works fine.

If I add a basic non-customized marker like so, it shows fine:

var leaflet = map.setView(L.latLng(features.center[1], features.center[0]), 16);
L.marker([features.center[1], features.center[0]]).addTo(leaflet);

Perfect, shows the marker right where it should... but I need a different color and some other minor customizations.

Per their site, the simplest implementation of adding a single marker:

map.setView(L.latLng(features.center[1], features.center[0]), 16);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
            features.center[1], features.center[0]
        ]
    },
    properties: {
        title: 'Peregrine Espresso',
        description: '1718 14th St NW, Washington, DC',
        // one can customize markers by adding simplestyle properties
        // https://www.mapbox.com/guides/an-open-platform/#simplestyle
        'marker-size': 'large',
        'marker-color': '#BE9A6B',
        'marker-symbol': 'cafe'
    }
}).addTo(map);

The setView() works, but the marker doesn't. No marker shown (and yes, I'm sure the lat/lon is correct, note that the same values are used for the L.marker() approach, unless they're supposed to be taken differently... the documentation leaves something to be desired).

I've tried just about every other example of this geojson method that I could find between yesterday and this morning, among those approachs which include using a layer ready event, a layer created event, and some others I don't recall now.

Can anyone see what I'm doing wrong?

@FranceImage is correct. In Leaflet, coordinates are provided by using the format (y,x) or (latitude,longitude). In the GeoJSON specification, you use the format (x,y) or (longitude,latitude). Both should be given in EPSG:4326, which it looks like you are using. So, just switch the coordinates in your GeoJSON. ie features.center[0], features.center[1]. Your L.marker works becuase it is using leaflets specification and not GeoJSON. — jOshT
@jOshT Thanks.. this is my first run-in with leaflets/geojson, hour explaination helps shed a bit of light on things. — jleach

YaFred YaFred · Accepted Answer · 2016-06-07T14:20:08

Check your GeoJSON coordinates. The order must be longitude, latitude (the opposite as setView)

var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([40, -74.50], 9);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
             -74.50, 40
        ]
    },
    properties: {
        title: 'Peregrine Espresso',
        description: '1718 14th St NW, Washington, DC',
        // one can customize markers by adding simplestyle properties
        // https://www.mapbox.com/guides/an-open-platform/#simplestyle
        'marker-size': 'large',
        'marker-color': '#BE9A6B',
        'marker-symbol': 'cafe'
    }
}).addTo(map);

Check out this Example

Mapbox Custom Marker

1 Answers