I've been trying to add a polygon on a Leaflet map and give it a style. I've been following their tutorials on http://leafletjs.com/examples/geojson.html however with no success.
My code is as following:
var myStyle = {
"color": "#0000FF",
"fill": true,
"opacity": 0.65
};
var myPolygon = [{
"type": "Feature",
"properties": {
"name": "Poly test",
"popupContent": "this is my test!",
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[6.0, 52], // top right
[5.9, 52], // top left
[5.9, 51.5], // bottom left
[6.0, 51.5]
]]
}
}];
// Create a map with standard location
map = L.map('map').setView([52.2, 6.5], 9);
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 14});
// Ask the user to get their current location
map.locate({setView : true});
// Add the tilelayer to the map
map.addLayer(osm);
L.geoJson(myPolygon, {
style: myStyle
}).addTo(map);
// Add event listeners
map.on('locationfound', myMarker);
The polygon outerlines are drawn, but with the standard blue color.
Could someone point me to the right solution on how to do this right?
Thanks!
You need fillColor and fillOpacity, see:
http://leafletjs.com/reference.html#path
Related
I faced with problem that my layers are duplicating at low zoom scale.
Using mapbox-gl-leaflet, it's combining mapbox map with leaflet. But first of all I'm using mapbox layers so seems the problem is in mapbox.
Here is code example:
var map = L.map('map', {minZoom: 1 }).setView([38.912753, -77.032194], 1);
var gl = L.mapboxGL({
accessToken: "access_token",
style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);
gl._glMap.on('load', () => {
gl._glMap.addLayer({
"id": "line-example",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [[28.2, 60.0], [-10, -13]]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "rgba(13, 12, 39, .7)",
"line-width": 6
}
});
});
And here is the result:
How can I fix this problem with duplicating? I need that my layer appear only in one 'world'.
You can prevent the map from rendering multiple copies of the world (and the layer) by setting renderWorldCopies to false.
Something like this would work:
var gl = L.mapboxGL({
accessToken: "access_token",
style: 'mapbox://styles/mapbox/bright-v8',
renderWorldCopies: false,
}).addTo(map);
For more options, check API spec here: https://docs.mapbox.com/mapbox-gl-js/api/
Try to add in maxBounds [ [-180, -85], [180, 85] ]
I have a map styled with mapbox studio, however I'm having difficulty adding even a basic marker to it, however text is appearing where the marker should be which suggests that the marker would be there.
So here's the code with that map style:
mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
container: 'map',
style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1",
center: [-30.50, 40],
zoom: 2,
interactive: false
});
And here some markers being added from an example in the api:
map.on('style.load', function () {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "monument"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"marker-color": "#ff00ff"
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
However only the text and not the icons appear.
Question is: how would I add just a normal basic colored marker to this map, not even one of the special icon ones?
Thanks.
Problem here is that the starting point of your style in Mapbox Studio, the template you chose, doesn't have the glyphs/sprites you're referencing in your layer layout. If you switch to the same style they're using in the example you've used:
mapbox://styles/mapbox/streets-v8 you'll see that the markers will appear. It's because they've been added to that style. If you switch back to your style, they're gone again.
Here's a console.log of your style's sprites:
And here's a console.log of Mapbox streets sprites:
As you can see, you have only two while mapbox has dozens (more than on the screenshot). You can use the ones you have by simply using the propertynames: default_marker and secondary_marker:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "default_marker"
}
}
map.addLayer({
"id": "markers",
"source": "markers",
"type": "symbol",
"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"
}
});
Example on Plunker: http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview
If you need more you've got to add the sprites/glyphs you want to use to your style in Mapbox studio. Unfortunately this has little to do with "programming" since it's related to Mapbox Studio which is a software tool and thus kind of "offtopic" here on stackoverflow.
If you don't even need sprite/glyphs you could also use type: circle and the paint properties to create simple circles:
map.addLayer({
"id": "markers",
"source": "markers",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
Example on Plunker: http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview
More on styles and sprites can be found here:
https://www.mapbox.com/help/define-sprite/
https://www.mapbox.com/developers/api/styles/#Sprites
https://www.mapbox.com/mapbox-gl-style-spec/#sprite
I have 1000 geographic data points and I have a US map. I want to create tiny circles at each of these 1000 geo data points. My data is in geojson format.
I am able create a circle at one point at a time. But how do I loop over the dataset to create circles at each point?
This is my circle code:
var circle = L.circle([64.837778, -147.716389], 500, {
color: 'black',
fillColor: '#000',
fillOpacity: 0.8
}).addTo(map);
You should use L.GeoJSON to render your data. It was made for rendering GeoJSON data. It has a pointToLayer function which you can use to render your point to circles, circlemarkers or whatever you desire. As a matter of fact the examples section on the Leaflet website has an exact example of what you are trying to accomplish:
L.geoJson(someGeojsonFeature, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
You can render single features or entire featureCollections with the GeoJSON layer, check out the examples on the site: http://leafletjs.com/examples/geojson.html
EDIT: as per request, an entire example:
First you start of with a GeoJSON featureCollection:
var featureCollection = [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-104.99, 39.73]
}
},{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-104.96, 39.73]
}
}];
Instanciate GeoJSON layer with the featureCollection:
var geoJsonLayer = L.geoJson(featureCollection, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
});
Add the layer to your map instance:
geoJsonLayer.addTo(map);
Working example on plunker: http://plnkr.co/edit/RzYMrkkly3DdHMnkjvVN?p=preview
i´m new in google maps and after reading here and there I can´t make this work.
I´m doing a google map where Im showing bike forest routes using geojson ( linestring type, are given by coordinates points).
"type": "Feature",
"properties": {
"name": "larouco",
"color":"red"
},
"geometry": {
"type": "LineString",
"coordinates": [ [ -7.634432, 41.955357, 981.6 ], [ -7.635379, 41.954641, 896.1 ], [ -7.635824, 41.953955, 900.9 ] ................ ] }
All fine at the moment.
I need to pan the map to the center of the road when you clicks it.
map.data.loadGeoJson('http://myroutes.json');
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return {
strokeColor: color,
strokeWeight: 3
};
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
here is where the problems starts
map.data.addListener('click', function(event) {
var center_rute = getCenter(new google.maps.LatLngBounds());
map.panTo(center_container);
//map.setZoom(13);
});
Thinks that LatLngBounds is the way but i´m running in circles...
Thanks,
Jul
You must access the geometry of the feature and create the LatLngBounds on your own by iterating over the points of the path(geometry)
I am a creating a polyline using a geojson. The format of my geojson is as below:
var myLines = [{
"type": "LineString",
"coordinates": [[-75, 21.9], [-75.4, 22.7], [-76.5, 23.4]]
}, {
"type": "LineString",
"coordinates": [[-105, 40], [-110, 45], [-115, 55]]
}];
L.geoJson(myLines).addTo(map);
I have a clear polyline function as below:
function clear_polyline(){
$.each(myLines, function(ind,poly){
map.removeLayer(poly);
});
}
This function does not clear the layer nor does it throw any error.
How do I clear a polyline in leaflet?
You need to remove the Leaflet layer from the map, not the GeoJSON object that the layer was created from. L.GeoJSON is a FeatureLayer that will contain all of the items in "myLines" so you should do something like this to remove it:
var linesFeatureLayer = L.geoJson(myLines);
linesFeatureLayer.addTo(map);
function clear_polyline() {
map.removeLayer( linesFeatureLayer );
}
var linesFeatureLayer = L.geoJson(myLines);
linesFeatureLayer.clearlayer()