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 © OpenStreetMap';
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?
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.
Related
I am a confused about how to access layers in Mapbox from leaflet. I have this;
$( document ).ready(function() {
var map = L.map('map').setView([33.72890830547334, 133.4454345703125], 7);
var osmmapbox = L.tileLayer('https://api.mapbox.com/styles/v1/usernamexxx/cl6om2qj0003214odo9xx676f/tiles/256/{z}/{x}/{y}#2x?access_token=[snip]', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);;
console.log(osmmapbox);
});
My mapbox styled map has 2 layers, one of nodes and another of ways. I tried to look into osmmapbox but I cannot see anything. Any pointers appreciated.
If you are using Mapbox.js, then you can't. It only supports displaying raster tiles, not interacting with the data inside vector tiles.
Use Mapbox GL JS if you want to query map data.
I think my problem was more about conceptualization of how mapbox processes info. What I did was upload my data to a dataset. I then create a tileset from the dataset. I created a style but did not include the data in the style but used mapbox gl js to add a geojson with two type of geometries. This is the final mapbox gl js code;
myToken = '[snip];
mapboxgl.accessToken = myToken;
// add a styled map to the container id map
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://[some style link here]',
});
map.on('load', () => {
map.addSource('data-source', {
type: 'vector',
// Use any Mapbox-hosted tileset using its tileset id.
// Learn more about where to find a tileset id:
// https://docs.mapbox.com/help/glossary/tileset-id/
url: 'mapbox://[tileset link goes here]'
});
map.addLayer({
'id': 'area-polygon',
'type': 'line',
'source': 'data-source',
'source-layer': 'bicycle_data',
'filter': ['==', '$type', 'Polygon']
});
map.addLayer({
'id': 'bicycle-parking',
'type': 'circle',
'source': 'data-source',
'source-layer': 'bicycle_data',
'filter': ['==', '$type', 'Point']
});
});
I have implemented the following piece of code where I need to fit a layer over a map, that I made using QGIS. But the coordinates are not working correctly, what should I do? The problem are the wrong coordinates or there is a way to fit the layer in the map correctly using overlay?
var L;
var initialCoordinates = [-14.91, -43.20];
var initialZoomLevel = 4;
// create a map in the "map" div, set the view to a given place and zoom
map = L.map('heatmap').setView(initialCoordinates, initialZoomLevel);
L.map('map', {
crs: L.CRS.EPSG4326
});
// add an OpenStreetMap tile layer
// L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
// attribution: '© OpenStreetMap © CartoDB',
// maxZoom: 19
// }).addTo(map);
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
}).addTo(map);
// [[5.32, -28.95], [-33.1999, -73.9]]
var imageUrl = '/images/temperatureMapDefault.png', //temperatureMapDefault.png
imageBounds = [[5.32, -28.95], [-33.1999, -73.9]]; // [[ymin, xmin][ymax, xmax]]
L.imageOverlay(imageUrl, imageBounds).addTo(map);
The coordinates for the bounding box are working just fine; the problem is in the projections.
Your QGIS project, and your output image, are using EPSG:4326. Leaflet uses EPSG:3857 (spherical mercator) for display. If you try to overlay a stretched EPSG:4326 image over a EPSG:3957 one, the top and bottom edges will fit but you'll experience a vertical shift.
You can see this more clearly by creating a bigger image in EPSG:4326 with country boundaries. I encourage you to experiment.
Please read https://docs.qgis.org/2.18/en/docs/user_manual/working_with_projections/working_with_projections.html and related documentation in order to configure your QGIS project to use a different CRS.
Trying to construct a Leaflet map. The goal is to place average points on the map for each country, using Choropleth. BindpopUp works. But for some reason, it doesn't show the borders of the countries like it was intended to but only the simple markers. Which is what I do not want.
var myMap = L.map("map", {
center: [40.7128, -74.0059],
zoom: 2.5
});
// Adding tile layer
L.tileLayer(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}",
{
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: "mapbox.streets",
accessToken: API_KEY
}
).addTo(myMap);
var geojson;
// Grab the data with d3
d3.json("static/js/wine.json").then(function(data) {
// This should place borders for the countries
L.geoJson(data).addTo(myMap);
// Create a new choropleth layer
geojson = L.choropleth(data, {
// Define what property in the features to use
valueProperty: "points",
// Set color scale
scale: ["#ffffb2", "#b10026"],
// Number of breaks in step range
steps: 10,
// q for quartile, e for equidistant, k for k-means
mode: "q",
style: {
// Border color
color: "#fff",
weight: 1,
fillOpacity: 0.8
},
// Binding a pop-up to each layer
onEachFeature: function(feature, layer) {
layer.bindPopup(
feature.properties.country +
", " +
feature.properties.points+
"<br>Median Price per bottle of wine:<br>" +
"$" +
feature.properties.price
);
}
}).addTo(myMap);
});
Based on the sample data from your previous question, you simply need to modify your GeoJSON data to specify "Polygon" type geometries (with array of coordinates), instead of your current "Point" type geometries (which are rendered by default by Leaflet as simple Markers).
I am working on a map where I need to load->edit->save geojson.
For now I am trying to use mapbox-gl-draw.js:
Upload geojson from file.
Add it to draw with draw.add()
var feature = {
id: 'unique-id',
type: 'Feature',
properties: {},
geometry: { type: 'Polygon', coordinates: [[[-91.94884436037492,42.807248622513725],[-91.97322027590168,42.7829334446084],[-91.91022055055936,42.7708352918585],[-91.9150270691187,42.79250947320156],[-91.94884436037492,42.807248622513725]]] }
};
var featureIds = draw.add(feature);
Remove the geojson from map
Edit the polygon with draw lib
Transform it back to geojson (put it to the layer) and show it as geojson on the map
Is there an easier way to edit the geojson?
Maybe edit it with draw without removing/updating it from the map
Thanks.
i have a map with some walking- and bike-routes and popups with a few details an a pic. Now i want to set a marker on the first vertex of a geojson polyline, but i cant find out how. Btw. i´m new to leaflet/mapbox, and i put my map togehter from code snippets.
Here is the map now:
This is how i create the polylines now. I call them via layercontrol.
var mtb = L.geoJson(radjs, {
filter: function (feature, layer) {
if (feature.properties) {
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
return feature.properties.typ === 'mtb';
}
return true;
},
style: {
"color": '#6699cc',
dashArray: '',
"weight": 4,
"opacity": 0.6
}, onEachFeature: onEachFeature2}).addTo(rad);
Thank you for your help,
Marc
You could just add a Feature to your geojson with the latitude and longitude like the do it in the Leaflet GeoJSON Example.
Probably it will be more convenient to read the geometry.coordinates from geojson features and define a new marker.
Beside you have an error on line 569. You should change:
var map = L.mapbox.map('map','',{
to:
var map = L.mapbox.map('map',null,{
Create a simple marker object and add it to the map.
marker = L.marker([0, 0], {
icon: L.mapbox.marker.icon()
}).addTo(map)
Then set the latitude and longitude to the first coordinates of your geoJSON. Assuming your geoJSON is set to the var geojson, you can access the coordinates by indexing into the array.
marker.setLatLng(L.latLng(
geojson.coordinates[0][1],
geojson.coordinates[0][0]))