I want to load Baidu basemap tiles with mapboxgl, but due to the problem of the coordinate system, there is a serious offset of the tiles. what should I do?
let simple = {
'version': 8,
'sources': {
'source': {
'type': 'raster',
'tiles': ['http://online0.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=017&udt=20130712'],
}
},
'layers': [
{
'id': 'layer',
'type': 'raster',
'source': 'source',
'minzoom': 0,
'maxzoom': 18,
'interactive': true
}]
}
mapboxgl.accessToken = 'pk.eyJ1IjoiY2h5eXpsMDgwOSIsImEiOiJjanAxemEyYnQwMWZvM3Fudzh5c3ZvbHJqIn0.j2i8D_Gcam955rcEt2k_mA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-74.50, 40],
zoom: 9
});
Related
Im using Mapbox GL API, and I run into the issue that if I add 2 tile layers, that the opacity of the second layer in the paint object is ignored. Does anyone have any idea why this is? In the browser both tile layers have opacity 1.
let style1 = {
id: "source1-tile",
type: "raster",
source: "source1",
paint: {
"raster-opacity": 1.0
},
}
this.map.addLayer(style1);
let style2 = {
id: "source2-tile",
type: "raster",
source: "source2",
paint: {
"raster-opacity": 0.5
},
}
this.map.addLayer(style2);
// print result
console.log(this.map.getStyle().layers)
// this shows the following:
/*
[
{
id: "source1-tile"
paint: Object { "raster-opacity": 1 }
source: "source1"
type: "raster"
},
{
id: "source2-tile"
source: "source2"
type: "raster"
}
]
*/
Pay attention to add layers in map.load event. I've made this example based on mapbox-gl examples. Easily You could add more raster layers with different opacity.
mapboxgl.accessToken = 'pk.eyJ1IjoibHN0aXoiLCJhIjoiY2s5dGtnNTZ2MWVybzNobjEyam0yd2E3MyJ9.6dCvGbS93SKGMbOqZA4Qag';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [-87.62, 41.86],
zoom: 9
});
map.on('load', () => {
map.addSource('chicago', {
'type': 'raster',
'url': 'mapbox://mapbox.u8yyzaor'
});
map.addLayer({
'id': 'chicago',
'source': 'chicago',
'type': 'raster'
});
map.setPaintProperty(
'chicago',
'raster-opacity',
0.5
);
});
I am trying to draw a line between two points using react-map-gl library. I can not find example from the official document, So I am trying to reproduce same behavior from following code snippet which use Mapbox library
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-122.486052, 37.830348],
zoom: 15
});
map.on('load', function() {
map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.483696, 37.833818],
[-122.493782, 37.833683]
]
}
}
});
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
});
Here is the sandbox, I do not see any errors on the console but the line is not displayed:
https://codesandbox.io/s/draw-line-between-two-point-v0mbc?file=/src/index.js:214-226
The code in the sandbox actually works (for me anyway), but is misleading because the line drawn is nowhere near the viewport.
A couple of things to note are that coordinates are an array given in [long, lat] which may not be what most people would assume. For example, if you cut and paste [lat,long] from google maps for San Fransisco, you get [37.77909036739809, -122.41510269913951]. Then you'll have to reverse those and put them in:
const dataOne = {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[-122.41510269913951, 37.77909036739809],
[39.5423, -77.0564]
]
}
};
Also, the sample code has some cruft in it. Edit the variable dataOne not the other unused place.
Now you'll see a line from San Fransisco to some random spot in the middle of Antarctica that was really easy to miss.
Just in case the link goes bad, the full code is:
import React, { Component } from "react";
import { render } from "react-dom";
import ReactMapGL, { Source, Layer } from "react-map-gl";
class App extends Component {
constructor(props) {
super(props);
this.state = {
viewport: {
latitude: 38.63738602787579,
longitude: -121.23576311149986,
zoom: 6.8,
bearing: 0,
pitch: 0,
dragPan: true,
width: 600,
height: 600
}
};
}
render() {
const { viewport } = this.state;
const MAPBOX_TOKEN =
"pk.eyJ1Ijoic21peWFrYXdhIiwiYSI6ImNqcGM0d3U4bTB6dWwzcW04ZHRsbHl0ZWoifQ.X9cvdajtPbs9JDMG-CMDsA";
const dataOne = {
type: "Feature",
properties: {},
geometry: {
type: "LineString",
coordinates: [
[-122.41510269913951, 37.77909036739809],
[39.5423, -77.0564]
]
}
};
return (
<ReactMapGL
{...viewport}
mapboxApiAccessToken={MAPBOX_TOKEN}
onViewportChange={(newViewport) => {
this.setState({ viewport: newViewport });
}}
>
<Source id="polylineLayer" type="geojson" data={dataOne}>
<Layer
id="lineLayer"
type="line"
source="my-data"
layout={{
"line-join": "round",
"line-cap": "round"
}}
paint={{
"line-color": "rgba(3, 170, 238, 0.5)",
"line-width": 5
}}
/>
</Source>
</ReactMapGL>
);
}
}
render(<App />, document.getElementById("root"));
I am trying to create cluster using ol 6.4.3. My script is
var cluster_data = {
"type": "Feature",
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [686213.47091037, 1093486.3776117],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [687067.04391223, 1094462.7275206],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [687214.60645801, 1094362.868384],
},
}
],
};
var features = new Array(3);
var source = new ol.layer.Vector({
features: new ol.format.GeoJSON().readFeatures(cluster_data),
});
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source,
});
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new Style({
image: new CircleStyle({
radius: 10,
stroke: new Stroke({
color: '#fff',
}),
fill: new Fill({
color: '#3399CC',
}),
}),
text: new Text({
text: size.toString(),
fill: new Fill({
color: '#fff',
}),
}),
});
styleCache[size] = style;
}
return style;
},
});
map.addLayer(clusters);
I have added other 3 Tile layers map.getLayers().extend([bm,road,landmark]); and trying to add cluster over this. But getting error Uncaught TypeError: this.source.loadFeatures is not a function while adding cluster.
The map I got after adding my layer is
The error is because
var source = new ol.layer.Vector({
should be
var source = new ol.source.Vector({
Also the first type in the data before the features should be
"type": "FeatureCollection",
And if you are using the OpenLayers full build
new Style new CircleStyle new Stroke new Fill and new Text
should be
new ol.style.Style new ol.style.Circle new ol.style.Stroke new ol.style.Fill and new ol.style.Text
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
proj4.defs("EPSG:32643","+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs");
ol.proj.proj4.register(proj4);
var cluster_data = {
"type": "FeatureCollection",
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [686213.47091037, 1093486.3776117],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [687067.04391223, 1094462.7275206],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [687214.60645801, 1094362.868384],
},
}
],
};
var source = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(cluster_data),
});
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source,
});
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function (feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff',
}),
fill: new ol.style.Fill({
color: '#3399CC',
}),
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff',
}),
}),
});
styleCache[size] = style;
}
return style;
},
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: "EPSG:32643"
})
});
map.addLayer(clusters);
map.getView().fit(source.getExtent());
map.getView().setZoom(map.getView().getZoom() - 6);
</script>
</body>
</html>
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
I need to simply add a tileset of points.
No idea why I'm not able to do this.
Here's the fiddle, below is the js code.
https://jsfiddle.net/qaehnvs9/3/
mapboxgl.accessToken = 'pk.eyJ1IjoibW9sbHltZXJwIiwiYSI6ImNpazdqbGtiZTAxbGNocm0ybXJ3MnNzOHAifQ.5_kJrEENbBWtqTZEv7g1-w'
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
hash: true,
center: [0,0],
zoom: 1,
pitchWithRotate: false,
})
/////////////////////////////////////////////////////////////
//Global Settlements
/////////////////////////////////////////////////////////////
map.on('load', function () {
map.addLayer({
'id': 'global_settlements_id',
'source': {
'type': 'vector',
'url': 'mapbox://nittyjee.c9okffto'
},
//'source-layer': 'shapefile_export-4f28wr',
'source-layer': 'shp-2lsmbo',
'type': 'symbol',
'maxzoom': 6,
'layout': {
'symbol-placement': 'point',
}
});
});
For dots/points, I needed to add it as a circle type.
Updated fiddle: https://jsfiddle.net/qaehnvs9/4/
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
hash: true,
center: [0,0],
zoom: 1,
pitchWithRotate: false,
})
/////////////////////////////////////////////////////////////
//Global Settlements
/////////////////////////////////////////////////////////////
map.on('load', function () {
map.addLayer({
'id': 'global_settlements_id',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://nittyjee.c9okffto'
},
'source-layer': 'shp-2lsmbo',
'paint': {
'circle-radius': 4,
'circle-color': '#e55e5e'
}
});
});