Related
I am closely following the example at this link at Mapbox documentation to add a pattern to a polygon. I have simply taken their code and added it to my map using an onClick event. It is very simple and basic. I am unable to figure out how to use my own data, though. They use manually entered coordinates. I wish to use my own local JSON file. How do I do this? Here is my code that works : (it is literally copied/pasted from the Mapbox tutorial, but this is my actual code that is working)
function test() {
// Add GeoJSON data
map.addSource('source', {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-30, -25],
[-30, 35],
[30, 35],
[30, -25],
[-30, -25]
]]
}
}
});
// Load an image to use as the pattern
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png', function(err, image) {
// Throw an error if something went wrong
if (err) throw err;
// Declare the image
map.addImage('pattern', image);
// Use it
map.addLayer({
"id": "pattern-layer",
"type": "fill",
"source": "source",
"paint": {
"fill-pattern": "pattern"
}
});
});
}
So, how do I use my own data? I have tried the following below and many (10+) variations and I can't get this to work. Below is just an example of what I am trying to do.
map.addSource('source', {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"data": "folder/sample.json"
},
}
}
});
map.addSource('source', {
"type": "geojson",
"data": "folder/sample.json"
});
See https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson
I am trying to build a custom polygon and extrude it to the desired height using a geojson format for the data of the layer. I cannot, however, get the layer to appear on the map.
Here is what my code currently looks like:
map.on('load', function() {
map.addLayer({
"id": "points",
"type": "fill-extrusion",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"height": 20
},
"geometry": {
"type": "Polygon",
"coordinates": [[-77.95156674578604,43.21028611031018],[-77.9515685764367,43.21023621803456],[-77.95164127121708,43.21023640149863],[-77.95163950226289,43.20994159756599],[-77.95156746849948,43.20994229766657],[-77.95156608216422,43.20984647340193],[-77.95163884784701,43.2098471878642],[-77.95163818870492,43.20974779426955],[-77.95156665824665,43.20974844351096],[-77.95156615562892,43.2096483942845],[-77.95163707195606,43.20964807835471],[-77.95163793551596,43.20955241242493],[-77.95156647756606,43.20955241987652],[-77.9515664774183,43.2094545892833],[-77.95163793511105,43.20945458922404],[-77.95163696894726,43.20935746267753],[-77.95156551159552,43.20935675861833],[-77.95156647716871,43.20929763788168],[-77.95105728862093,43.20929848258431],[-77.95105728634326,43.20935651174059],[-77.95094326166087,43.20935664235909],[-77.9509445324407,43.2094533024724],[-77.95105528277132,43.20945365396392], [-77.95105519319713,43.20955170962569],[-77.9509434596672,43.20955220425741],[-77.95094421091157,43.20964816606944],[-77.95105501443713,43.20964756032618],[-77.95105491497931,43.20974624410085], [-77.95094329958742,43.20974576773256],[-77.95094365714365,43.20984690983914],[-77.95105721793563,43.20984632462195],[-77.95105737381726,43.20994209364298], [-77.95094302334114,43.2099429224098], [-77.95094306509297,43.21003748562214],[-77.95105440575118,43.21003746846881],[-77.95105570050066,43.21013103703177],[-77.95094276571092,43.21013059432006],[-77.95094112502309,43.21023730976442],[-77.95105416431622,43.21023720143463],[-77.95105549775089,43.21028580291442],[-77.95156674578604,43.21028611031018]]
}
}]
}
},
"paint": {
"fill-extrusion-color": "#aaa",
"fill-extrusion-height": ['get', 'height']
}
});
});
Polygon is an array of LineStrings in GeoJSON (see https://en.wikipedia.org/wiki/GeoJSON#Geometries, for instance). So in your case the coordinates should look like this:
"coordinates": [[[-77.95156674578604,43.21028611031018],[-77.9515685764367,43.21023621803456],[-77.95164127121708,43.21023640149863],[-77.95163950226289,43.20994159756599],[-77.95156746849948,43.20994229766657],[-77.95156608216422,43.20984647340193],[-77.95163884784701,43.2098471878642],[-77.95163818870492,43.20974779426955],[-77.95156665824665,43.20974844351096],[-77.95156615562892,43.2096483942845],[-77.95163707195606,43.20964807835471],[-77.95163793551596,43.20955241242493],[-77.95156647756606,43.20955241987652],[-77.9515664774183,43.2094545892833],[-77.95163793511105,43.20945458922404],[-77.95163696894726,43.20935746267753],[-77.95156551159552,43.20935675861833],[-77.95156647716871,43.20929763788168],[-77.95105728862093,43.20929848258431],[-77.95105728634326,43.20935651174059],[-77.95094326166087,43.20935664235909],[-77.9509445324407,43.2094533024724],[-77.95105528277132,43.20945365396392], [-77.95105519319713,43.20955170962569],[-77.9509434596672,43.20955220425741],[-77.95094421091157,43.20964816606944],[-77.95105501443713,43.20964756032618],[-77.95105491497931,43.20974624410085], [-77.95094329958742,43.20974576773256],[-77.95094365714365,43.20984690983914],[-77.95105721793563,43.20984632462195],[-77.95105737381726,43.20994209364298], [-77.95094302334114,43.2099429224098], [-77.95094306509297,43.21003748562214],[-77.95105440575118,43.21003746846881],[-77.95105570050066,43.21013103703177],[-77.95094276571092,43.21013059432006],[-77.95094112502309,43.21023730976442],[-77.95105416431622,43.21023720143463],[-77.95105549775089,43.21028580291442],[-77.95156674578604,43.21028611031018]]]
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'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;
}
});