We Keep Coding

Can't add a geoJson layer to my Open Layers map

Using Open Layers and leaflet-sidebar-v2, I've added the sidebar to my map, this works. However, I also need to add another layer to my map, this layer will outline each country. I have the coordinates stored in a 'borders.json' file. I'm attempting to use D3.json to to import the border coordinates and then L.geoJson to add the new layer to my map.
I'm currently getting the following error message:
Uncaught TypeError: t.getLayerStatesArray is not a function
Here is the relevant part of my code..
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
center: ol.proj.transform([7, 51.2], "EPSG:4326", "EPSG:3857"),
zoom: 3,
}),
});
var sidebar = new ol.control.Sidebar({
element: "sidebar",
position: "left",
});
map.addControl(sidebar);
d3.json(("borders.json"), function (json){
function style(feature) {
return {
fillColor: "transparent",
weight: 1,
opacity: 0.4,
color: 'grey',
fillOpacity: 0.3
}
}
geojson = L.geoJson(json, {
style: style,
}).addTo(map);
})
I think I might be adding the geojson layer to my map incorrectly, but I can't figure out what is wrong. I've spent quite a bit of time playing with it, but no luck.
Any helps is appreciated.
Cheers,
Beat

It might be hard to tell what the problem is without knowing other possible relevant parts of your code. I'd start by checking that the contents of borders.json follows valid GeoJSON format.
This is likely unrelated to your question, but is there a reason that you've declared style as a function like function style(feature) { ... }?
It looks like the style attribute of L.geoJson accepts an object rather than a function.

How to access an array sent by node/express at server-side and use it at the client-side in google maps?

I was trying to create my clustering markers over the google maps.
client side
<script>
// from google map docs
function initMap() {
// array of locations
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
];
// rendering an instance of google maps
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
// Create an array of alphabetical characters used to label the markers.
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
const markers = locations.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
});
});
// Add a marker clusterer to manage the markers.
new MarkerClusterer(map, markers, {
imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
}
</script>
<script src="https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js">
// importing marker clusterer required to manage the markers
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%-process.env.GOOGLE_MAPS_API_KEY%>&callback=initMap">
// api callback initMap
</script>
As you can see inside the initMap(), there is a variable called locations and this is an array of locations in geocode format.
The const markers is using the hard-coded locations to .map() over and set the markers.
server side
app.get("/", async (req, res) => {
// getting array of places
const places = await Place.find({});
// getting an array of marks from places
// it must be in geocode format:
// [{ lat: 123, lng: 123 }, { lat: 856, lng: 547 }, { lat: 775, lng: 937 },] ...
const marks = places
.filter(function (el) {
if (el.lat && el.lng) {
return true;
}
})
.map((el) => ({
lat: el.lat,
lng: el.lng,
}));
// creating a storage for cluster marks
const clusterMarks = [];
// spreading the marks array into cluster marks array
clusterMarks.push(...marks);
// rendering and passing places and clusterMarks to be used at the client side
res.render("./index", { places, clusterMarks });
});
As you supposed, I want to make the locations dynamic, so ...
The backend is sending an "array of locations in geocode format" called clusterMarks to be used at the client-side. But, as described in the question below, I don't know how a way to access this variable at the client-side script.
Additional info: Using Node.js Express and EJS.
Question:
How to access/bring the clusterMarks (array variable) sent by node/express at the client-side, to be able to use it inside the tag <script></script> in the function initMap(), to render the marks of clusterMarks?

You can use JSON.strinigfy/parse and ejs's unescaped output tag (<%-) to do this, consider this simple example:
Server-side:
app.get('/', (req, resp) => {
const clusterMarks = [{some:"data"}, {another:"object"}];
resp.render('index', {clusterMarks: JSON.stringify(clusterMarks)})
})
Client-side:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
let clusterMarksParsed = JSON.parse('<%- clusterMarks %>');
for (const mark of clusterMarksParsed) {
console.log(mark);
}
</script>
</head>
<body>
</body>
</html>
This will print
{some: "data"}
{another: "object"}
to the console on the browser.

Change gestureHandling in Leaflet when map is already initalized

I am using Leaflet fo implement a map in my website.
I use the feature gestureHandling to make sure that scrolling is not captured by the map. Everything works fine - but I would like to change the gestureHandling attribute later in the code when a user choses to make the map fullscreen.
I can't get it to work. Do I have to reinitialise the map somehow?
Thanks in advance!
This is my Code:
map = L.map($map[0], {
center: new L.LatLng(47, 10),
zoom: 14,
minZoom: 2,
maxZoom: 18,
layers: [layerGroup],
gestureHandling: true
});
$('body').on('click','.resize-toggler',function(){
map.gestureHandling = false;
})

I found the solution. The following code works.
There seems to be a function you can call -> map.gestureHandling.disable();
map = L.map($map[0], {
center: new L.LatLng(47, 10),
zoom: 14,
minZoom: 2,
maxZoom: 18,
layers: [layerGroup],
gestureHandling: true
});
$('body').on('click','.resize-toggler',function(){
map.gestureHandling.disable();
})

eCharts 3 - zoom on geo map onclick

Does anyone know how to click on a country, then have it zoom in on that country/area in a 2D geo world map?
I am using the world 2D map that is provided in eCharts 3. So my options look like this:
geo: {
name: '2D Global Map',
type: 'map',
map: 'world',
roam: true,
label: {
emphasis: {
show: false
}
},
...
Here is what I have thus far. When I click it just zooms straight in to 4 rather than where I clicked.
myChart.on('click', function (params) {
myChart.setOption({
geo: {
zoom: 4
}
});
});
myChart.setOption(option);
I have tried to find ways to zoom in on the x and y offsets, but that doesn't work.
I also tried to center the map first like this but you need the latitude and longitude of where to center the map inside the array. The map uses JSON for the coordinates, and I can see them, but I can't get them to pull into the array.
myChart.on('click', function (params) {
myChart.setOption({
geo: {
center: [(need to get lat/long of where clicked)],
zoom: 4
}
});
});
myChart.setOption(option);
Any thoughts on ways to do this?

Just in case anyone else is having this same problem, I was able to solve it in this manner:
myChart.on('click', function(params) {
if (params.data) {
myChart.setOption({
geo: {
center: params.data.value,
zoom: 6
}
});
} else {
myChart.setOption({
geo: {
center: [0,0],
zoom: 1
}
});
}
myChart.setOption(option);
});
It doesn't fully solve the problem where I wanted to be able to zoom in on any country, but it does solve the problem in the fact that I can zoom into a data point inside a country.
If anyone else has suggestions on how to do the country part please let me know.

KML Locations file - displays correctly in GoogleEarth, but not in OpenLayers2 on a GoogleMap Base Layer

I have a set of places saved from GoogleEarth as a KML file. I am trying to get the same locations to display on a simple OpenLayer2 map using the following Js code :
var map;
function init() {
var bounds = new OpenLayers.Bounds();
bounds.extend( new OpenLayers.LonLat(0.2, 52.3).transform('EPSG:4326', 'EPSG:3857'));
bounds.extend( new OpenLayers.LonLat(1.9, 51.5).transform('EPSG:4326', 'EPSG:3857'));
map = new OpenLayers.Map('map', {
projection: 'EPSG:3857',
layers: [
new OpenLayers.Layer.Google(
"Google Streets", // the default
{ numZoomLevels: null, minZoomLevel: 1, maxZoomLevel: 16 }
),
],
controls: [ new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
],
center: new OpenLayers.LonLat( 1.0, 52.1)
// Google.v3 uses web mercator as projection, so we have to
// transform our coordinates
.transform('EPSG:4326', 'EPSG:3857'),
restrictedExtent: bounds,
zoom: 9,
});
var layer = new OpenLayers.Layer.Vector("KML", {
animationEnabled: true,
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "/static/OL3Example/kml/locations.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
})
}) ;
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
}
The Restricted Extends make the map display just SUffolk, Uk, and all but 4 of the locations are in Suffolk (so should be on the map). Looking at the KML data I can confirm that the locations in the KML are correct Decimal Lon/Lat.
When I remove the Restricted Extent from the map - I can pan around the world, and I can then see a cluster of Icons at 0 Lon, 0 Lat.
I have looked at the documentation - and a number of stackoverflow related questions : for instance OpenLayers not displaying kml layer, but none have answered the question.
I have used Firebug to investigate the map object and it's layers - and I can confirm that the layer is visible - and is drawn, and there are no unrenderedFeatures on the layer - suggesting that the layer is loading fine - and it is a projection thing - though what is confusing.