I am trying to add a circle marker to my MapBox but passed options doesn't do what its supposed to do. I am using following code
L.mapbox.featureLayer(
{ "geometry": {"type": "Point", "coordinates": [lng , lat]}, "type": "Feature", "properties": {} },
{ pointToLayer: function(feature, latlon) {
var marker = L.circleMarker(latlon, {
radius: 2,
color: "#ff0000"
});
return marker;
} }
).addTo(map);
the radius is set but the color is set to default.
This was a bug in Mapbox.js 2.1.8: if you update to 2.1.9, the issue should be resolved.
Related
I am trying to add polylines to a mapbox view in Flutter using the mapbox_gl library. The problem is that I also have markers (called symbols in the library) that need to be on top of the polylines, but it keeps drawing the polylines over the symbols.
This is the function I use to add the symbols:
_mbController.addSymbol(SymbolOptions(
geometry:
LatLng(vehicle['position']['lat'], vehicle['position']['lon']),
iconImage: 'vehicle'));
Then I use these functions to add the polylines:
Future<void> updatePolyLines(var geometry) async {
_fills = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 0,
"properties": <String, dynamic>{},
"geometry": geometry,
},
],
};
await _mbController!.removeLayer("lines");
await _mbController!.removeSource("fills");
await _mbController!
.addSource("fills", GeojsonSourceProperties(data: _fills));
await _mbController!.addLineLayer(
"fills",
"lines",
const LineLayerProperties(
lineColor: '#007AFF',
lineCap: "round",
lineJoin: "round",
lineWidth: 4,
));
}
Future<void> showNavLine(LatLng destination) async {
LocationTuple l = await getLocation(context);
if (l.gotPosition) {
var response = await prepareRoute(l.latLng, destination);
if (response == null) {
return;
} else {
updatePolyLines(response['routes'][0]['geometry']);
}
}
}
The prepareRoute function uses the mapbox API to get a route, this part is working fine and the line is shown. However, as I said it is draw on top of the symbols.
I read that you can draw the polylines below a certain layer. So I tried adding a separate layer for the symbols and drawing the polylines below that, but I suspect the symbols are not put on that specific layer. I can't even set a specific layer in the addSymbol function of MapboxController.
Please advise. Btw all the examples I found online so far just draw the lines over the symbols. Drawing the lines first and then the symbols doesn't work.
I figured out how to put symbols in layers. Also, I was using [lat, lon] while it should have been [lon, lat]..
As long as you add the symbolLayer after the polyline layer the symbols will be drawn on top of the lines. Here is a working example (coordinates have been removed for privacy reasons but the working code is there):
var geometry = {
"coordinates": [
[lon, lat],
[lon, lat],
[lon, lat],
[lon, lat],
[lon, lat],
[lon, lat],
[lon, lat]
],
"type": "LineString"
};
_fills = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 0,
"properties": <String, dynamic>{},
"geometry": geometry,
},
],
};
await _mbController!.removeLayer("lines");
await _mbController!.removeSource("fills");
await _mbController!
.addSource("fills", GeojsonSourceProperties(data: _fills));
await _mbController!.addLineLayer(
"fills",
"lines",
const LineLayerProperties(
lineColor: '#007AFF',
lineCap: "round",
lineJoin: "round",
lineWidth: 4,
),
);
await _mbController!.addSymbolLayer(
"scooter25_layer",
"vehicles",
const SymbolLayerProperties(
iconImage: "scooter25",
iconAllowOverlap: true,
),
);
const Map<String, dynamic> featureCollection = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [lon, lat],
}
}
]
};
await _mbController!.addGeoJsonSource("scooter25_layer", featureCollection);
I am attempting to create a simple heatmap from a feature collection of points using leaflet's heatmap plugin. After successfully getting the json data from an ajax call, I create an empty coords array and push coordinates from each feature.
However, this method does not work and neither does the geojson2heat function. There are no errors in the console. What am I doing wrong and does anyone know of a workaround?
var map = L.map('map').setView([50.0647, 19.9450], 12);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
}).addTo(map);
var geojsonLayer = new L.GeoJSON.AJAX("newmap.geojson");
coords = [];
function onEachFeature(feature, layer) {
coords.push(feature.geometry.coordinates);
};
L.GeoJSON(geojsonLayer, {
onEachFeature: onEachFeature
})
var heat = L.heatLayer(coords).addTo(map);
The structure of the geojson is standard:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "st_x": 19.952030181884801, "st_y": 50.055513141929701 }, "geometry": { "type": "Point", "coordinates": [ 19.952030181884801, 50.055513141929701 ] } },
{ "type": "Feature", "properties": { "st_x": 18.672015, "st_y": 50.287181666666697 }, "geometry": { "type": "Point", "coordinates": [ 18.672015, 50.287181666666697 ] } },
I am mostly doing the same as you but with Mapbox, which is based on Leaflet.
The problem I had is that the latitude and longitude coordinates of the GeoJSON were reversed. There were no errors on console either- points were just not showing on map. So, you need:
"coordinates": [ longitude, latitude ]
Hope that's the issue.
I've followed both the example at Mapbox site and this instruction on GitHub but can't get markers to show on my map:
http://codepen.io/znak/pen/waPPRj (using Mapbox style and sprites)
http://codepen.io/znak/pen/PqOEyV (using custom style and sprites)
var center = [51.5, -0.1];
var map = new mapboxgl.Map({
container: 'map',
center: center,
zoom: 8,
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/mapbox-streets-v7.json'
});
// Markers
map.on('style.load', function() {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.48, -0.08]
},
"properties": {
"title": "Lorem",
"marker-symbol": "default_marker"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.52, -0.12]
},
"properties": {
"title": "Ipsum",
"marker-symbol": "secondary_marker"
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}",
"text-field": "{title}",
"text-font": "Open Sans Semibold, Arial Unicode MS Bold",
"text-offset": [0, 0.6],
"text-anchor": "top"
},
"paint": {
"text-size": 14
}
});
});
All styles, JSON and PNG files with markers seem to load properly.
Any ideas?
The GeoJSON layer type of Mapbox GL JS follows the GeoJSON specification, which requires that coordinates be in longitude, latitude order. Your examples have them reversed. Flipping them shows the markers, which have the correct icons.
"geometry": {
"type": "Point",
"coordinates": [-0.12, 51.52]
}
I'm trying to implement simplestyle's options for marker size and color , but can't get them to render. In this simple test case, I'm trying to follow Mapbox's own example quite closely:
var myData = [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [4.509373,51.932994]
},
"properties": {
"marker-size": "large",
"marker-color": "#ffcc00"
}
}
];
var map = L.mapbox.map('map', 'examples.map-20v6611k')
.setView([51.932994,4.509373], 8);
L.geoJson(myData, { style: L.mapbox.simplestyle.style }).addTo(map);
fiddle
But the marker renders in default style. What am I missing?
OK, I've got it working using this extended function from this page of Mapbox's documentation:
L.geoJson(myData, {
pointToLayer: L.mapbox.marker.style,
style: function(feature) { return feature.properties; }
}).addTo(map);
The other Mapbox example didn't make it look like the pointToLayer argument was required, but whatever works:
fiddle
Another alternative would be to create a featureLayer based on your myData:
var featureLayer = L.mapbox.featureLayer(myData).addTo(map);
Your data will have to be an object, however, and not an array:
var myData = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [4.509373,51.932994]
},
"properties": {
"marker-size": "large",
"marker-color": "#ffcc00"
}
};
I've been searching for hours and hours now, and i'm still stuck. I have a feeling it is something easy/stupid i'm missing.
I am using the example of markercluster from GitHub. I have 2 different markers (simply 2 different colors) that i would like to show which i would defined in the json format.
I have followed guide from leaflet site to define different markers.
I added my variable to the json part, but i can not figure out how to make the map load the different markers. It's either giving me no map or error; or it still uses the default blue marker.
here is my code:
<script type="text/javascript">
var geoJsonData = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id":"1", "properties": { "address": "2","marker": "cmIcon"}, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
{ "type": "Feature", "id":"2", "properties": { "address": "151","marker": "otherIcon" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435 ] } },
{ "type": "Feature", "id":"3", "properties": { "address": "21","marker": "cmIcon" }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193 ] } },
{ "type": "Feature", "id":"4", "properties": { "address": "14","marker": "otherIcon" }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963 ] } },
{ "type": "Feature", "id":"5", "properties": { "address": "38B","marker": "cmIcon" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
{ "type": "Feature", "id":"6", "properties": { "address": "38","marker": "otherIcon" }, "geometry": { "type": "Point", "coordinates": [175.2209942 ,-37.8192782833 ] } }
]
};
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
});
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'marker/marker-shadow.png',
iconSize: [32, 32],
shadowSize: [36, 20],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var cmIcon = new LeafIcon({iconUrl: 'marker/marker-cm.png'}),
otherIcon = new LeafIcon({iconUrl: 'marker/marker-others.png'});
var map = L.map('map')
.addLayer(cloudmade);
var markers = new L.MarkerClusterGroup();
var geoJsonLayer = L.geoJson(geoJsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.address);
}
});
markers.addLayer(geoJsonLayer);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("Vous etes ici").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
</script>
I suspect that i need to tell leaflet to get the marker variable, probably in
var geoJsonLayer = L.geoJson(geoJsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.address);
}
});
but i cannot make it work.
i even tried as suggested some where else:
var geoJsonLayer = L.geoJson(geoJsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.address),
layer.setIcon(feature.properties.marker);
}
});
i'm still getting an error: Uncaught TypeError: Object cmIcon has no method 'createIcon'
does anybody have an idea on how to do that?
Any help would be greatly appreciated.
Thank you in advance.
You need to tell the MarkerClusterGroup how to create the icon. The marker cluster docs show an example with a DivIcon like this:
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});
You can use your custom icon instead like this:
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
// decide which icon you want to use
return (cluster.getChildCount() > 10) ? cmIcon : otherIcon;
}
});