When using leaflet.js to render polygon.
The following examples have different results.
Example 1
const map = L.map('map', {
preferCanvas: true,
zoomControl: false,
attributionControl: false
});
const latlngs = [
[
6,
5
],
[
7,
1
],
[
9,
2
]
];
const polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
map.fitBounds(polygon.getBounds());
Example 2
...
const latlngs = [
[
116,
115
],
[
117,
111
],
[
119,
112
]
];
const polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
map.fitBounds(polygon.getBounds());
Why is that?
And what can I do if I have to set latlngs data like Example 2.
The reason is that Leaflet uses latitude and longitude by default and projects it on a plane using a Web Mercator projection. On your second polygon, the coordinates are out of bounds for latitude.
If you just need to draw a triangle in "pixel" coordinates, you can use CRS.Simple.
const map = L.map('map', {
preferCanvas: true,
zoomControl: false,
attributionControl: false,
// Add this line:
crs: L.CRS.Simple
});
See JSFiddle: http://jsfiddle.net/ekqvwo76/
Related
in leaflet.js i have polyline in openstreet map:
point1(long, lat), 2(long, lat)....pointXY(long,lat)
Is possible (and how) highlight or change color only segment from point 2 to 5, no matter how to invoke.
I try add another polyline, but with more segments its mess with more and more duplicit points.
Working sample:
http://next.plnkr.co/edit/FyUzMG9Y9NrbYrzL
i looking for turn segment between [40,10],[10,10],[10,30] red. If its possible, by index [2,3,4]
thanks for help
You can try GeoJson layer to highlight a line. Just make sure that geojson coordinates are in LngLat format.
var map = L.map('map', {
center: [0, 0],
zoom: 0,
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
}),
],
});
var data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[30, 10], [45, 45]],
},
properties: {
color: 'green',
},
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[10, 40], [10, 10], [30, 10]],
},
properties: {
color: 'red',
},
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [[-45, -45], [10, 40]],
},
properties: {
color: 'black',
},
},
],
};
var geoJsonLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
if (layer instanceof L.Polyline) {
layer.setStyle({
color: feature.properties.color,
});
}
},
}).addTo(map);
Plunker: http://next.plnkr.co/edit/s4Q72s7RyOLp714U?preview
Ref: https://embed.plnkr.co/plunk/XqzvdR
So I have a Mapbox Tileset I've uploaded with census-block information for the US. Each geometry in the tileset has a property called GeoID, that I am trying to apply a style to based on another collection I have.
The collection is an array objects with this format: [{geoid: string, weight: number}, {geoid: string, weight: number},...]
I want to match the GeoIDs from the array to the layer from the tileset and color it based on the corresponding weight property from that object. Weight is a number between 0 and 1. I have tried searching the documentation on runtime styling and expressions from Mapbox, but I can't find anything about extrapolating data from a collection and conditionally applying it to the right geometries from a tileset.
You can generate an expression from your list of weights and than pass it to the layer your want to style:
const weights = [
{geoid: 1, weight: 10},
{geoid: 2, weight: 5},
{geoid: 3, weight: 30},
];
const cases = weights.map(weight => {
const condition = ['==', ['get', 'geoid'], weight.geoid];
const output = getColor(weight.weight);
return [
condition,
output
];
});
const expresion = ['case',
...cases.reduce((flat, conditionAndOutput) => [...flat, ...conditionAndOutput]),
'<default-color>'
];
/*
Will result in:
[
"case",
[
"==",
[
"get",
"geoid"
],
1
],
"rgb(255, 255, 255)",
[
"==",
[
"get",
"geoid"
],
2
],
"rgb(255, 255, 255)",
[
"==",
[
"get",
"geoid"
],
3
],
"rgb(255, 255, 255)",
"<default-color>"
]
*/
This is what my dataset looks like:
Seattle Crime Dataset
What I want to do is change the extrusion height based on the frequency column. I can successfully display these as points but I'm struggling with it whenever I use fill-extrusion. Can you help point me in the right direction?
map.addLayer({
'id': 'total',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://askakdagr8.9tklrr8g'
},
'source-layer': 'GroupedOutput-9i6ink',
'paint': {
// make circles larger as the user zooms from z12 to z22
'circle-radius': {
'base': 1.75,
'stops': [
[12, 2],
[22, 180]
]
},
'circle-color': '#ff7770'
}
});
Since the mapbox-gl-js does not currently have functionality for extruding a circle, you need to replace the points with a polygon, and interpolating the circle, for example, by a function turf.circle:
map.on('sourcedata', function(e) {
if (e.sourceId !== 'total') return
if (e.isSourceLoaded !== true) return
var data = {
"type": "FeatureCollection",
"features": []
}
e.source.data.features.forEach(function(f) {
var object = turf.centerOfMass(f)
var center = object.geometry.coordinates
var radius = 10;
var options = {
steps: 16,
units: 'meters',
properties: object.properties
};
data.features.push(turf.circle(center, radius, options))
})
map.getSource('extrusion').setData(data);
})
[ http://jsfiddle.net/zjLek40n/ ]
Here, I am drawing route and assigning stop to route using Leaflet Routing Machine Leaflet Routing Machine
var control = L.Routing.control(L.extend(window.lrmConfig, {
waypoints: [array object of stops],
geocoder: L.Control.Geocoder.nominatim(),
routeWhileDragging: true,
reverseWaypoints: true,
showAlternatives: true,
altLineOptions: {
styles: [
{color: 'black', opacity: 0.15, weight: 9},
{color: 'white', opacity: 0.8, weight: 6},
{color: 'blue', opacity: 0.5, weight: 2}
]
}
})).addTo(map);
In waypoints object array I have bind custom marker like:
L.marker([item.latLng.lat, item.latLng.lng], {icon: stopIcon}).addTo(map).bindPopup(item.name);
But I am getting 2 markers 1 is default and second is my custom icon. You can see in my screen-shot one is default(blue marker) and custom icon(stop image)
So I want to replace default (blue marker) with my custom and remove the default marker. Thanks.
you can use this code :
L.Routing.control({
waypoints: [
L.latLng(36.3603179, 59.5041424),
L.latLng(36.3279067, 59.5248145)
],
routeWhileDragging: true,
lineOptions: {
styles: [{ color: 'green', opacity: 1, weight: 5 }]
},
createMarker: function (i: number, waypoint: any, n: number) {
const marker = L.marker(waypoint.latLng, {
draggable: true,
bounceOnAdd: false,
bounceOnAddOptions: {
duration: 1000,
height: 800,
function() {
(bindPopup(myPopup).openOn(map))
}
},
icon: L.icon({
iconUrl: './assets/global/img/mapmarker-red.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowUrl: './assets/global/img/marker-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
})
});
return marker;
}
}).addTo(map);
Finally, I found a solution.
Added property
createMarker: function() { return null; },
I want to achieve like this http://techblog.mappy.com/Leaflet-active-area/examples/index.html
I have added a floating content in left of the section. So the marker must remain in the right side.
Here is a demo.
JS:
// ***********************************************
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFseiIsImEiOiJjaXdmczJha28wMG9sMnVsZnlxZWt1bmxhIn0.v8SlQ70Ay1MzNoPXhlXWVg';
// ***********************************************
// DID YOU FORK THIS EXAMPLE?
// Enter your access token below
// and uncomment the line to keep your
// project online!
// Need a token? Create free account
// mapbox.com/signup
// ***********************************************
// mapboxgl.accessToken = 'YOUR-ACCESS-TOKEN-HERE';
// ***********************************************
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [144.985258,-37.807426],
zoom: 14
});
var framesPerSecond = 15;
var initialOpacity = 1
var opacity = initialOpacity;
var initialRadius = 6;
var radius = initialRadius;
var maxRadius = 18;
map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('point', {
"type": "geojson",
"data": {
"type": "Point",
"coordinates": [
144.985258, -37.807426
]
}
});
map.addLayer({
"id": "point",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": initialRadius,
"circle-radius-transition": {duration: 0},
"circle-opacity-transition": {duration: 0},
"circle-color": "#007cbf"
}
});
map.addLayer({
"id": "point1",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": initialRadius,
"circle-color": "#007cbf"
}
});
function animateMarker(timestamp) {
setTimeout(function(){
requestAnimationFrame(animateMarker);
radius += (maxRadius - radius) / framesPerSecond;
opacity -= ( .9 / framesPerSecond );
map.setPaintProperty('point', 'circle-radius', radius);
map.setPaintProperty('point', 'circle-opacity', opacity);
if (opacity <= 0) {
radius = initialRadius;
opacity = initialOpacity;
}
}, 1000 / framesPerSecond);
}
// Start the animation.
animateMarker(0);
});
Unfortunately there isn't support yet for something like fitBounds with padding. https://github.com/mapbox/mapbox-gl-js/issues/1740
A possible workaround could be flying to the marker with an offset.
map.flyTo({
center: [144.985258, -37.807426],
offset: [300, 0],
speed: 0.8,
curve: .6
});