CODEWITHSUNDEEP
openstreetmapleafletmapbox
Luis Martins
Luis Martins

Reputation: 1481

Using mapbox markers with tiles from OpenStreetMap

Im trying to use the Mapbox API while bringing tiles from OpenStreetMap, but I not finding a way to populate the map with Mapbox markers:

var baseMap, map, notificationMarker, osmAttrib, osmUrl, overlayInfo, streets, systemLocations, systemLocations2, systemsMap;

osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>';

map = L.mapbox.map('map');
map.setView([39.138, -6.641], 7);

baseMap = L.tileLayer(osmUrl, {
  attribution: osmAttrib
}).addTo(map);


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: [39.53833, -8.64106]
    },
    properties: {
        title: 'A Single Marker',
        description: 'Just one of me',
        // one can customize markers by adding simplestyle properties
        // http://mapbox.com/developers/simplestyle/
        'marker-size': 'large',
        'marker-color': '#f0a'
    }
}).addTo(map);

Is this feature usage restricted to Mapbox tiles only?

Upvotes: 0

Views: 455

Answers (1)

Luis Martins
Luis Martins

Reputation: 1481

My issue was related to the coordinates array.

The GeoJSON seems to be expecting coordinates with the inverse order.

Where I had:

L.marker([38.13833, -7.24106])

I converted in the geoJSON array to:

coordinates: [-7.24106, 38.13833]

The markers where being displayed on my previous code, simply way ou of the visible area on my map.

Upvotes: 1

Related Questions