Hot answers tagged

9 votes

OpenLayers: How do I remove a layer based on a value?

One option is to get the collection of the map layers using the getLayers() method. Then get a reference to the underlying array of layers using the getArray() method. Now that you have an array of ...
user avatar
5 votes
Accepted

Openlayers - Unable to set the style of features

The style needs to be defined as var selected_polygon_style = new Style({ stroke: new Stroke({ width: 5, color: "#ff0000" }, fill: new Fill({ color: "#...
user avatar
  • 10.1k
4 votes
Accepted

Creating buffers using JSTS + ES6 modules not working

I'm answering my own question as I found a solution. I wrote to the JSTS dev list asking about this issue and they told me to "Avoid using extend/hacks as in the third party example" and to instead ...
user avatar
4 votes

How to manually control react-leaflet popups (via props) within a GeoJSON layer?

Add the following to: <GeoJSON data={locations} onEachFeature={onEachFeature} />: onEachFeature(feature, layer) { const popupOptions = { minWidth: 250, maxWidth: 500, className: "...
user avatar
  • 41
4 votes
Accepted

OpenLayers displaying Polygon with Icon style

Icons are only displayed for Point or MultiPoint geometry. To display Icons for Polygons the style must include a geometry function which returns a Point or MultiPoint (you would usually use the ...
user avatar
  • 10.1k
4 votes
Accepted

Trying to visualize a geojson on react-leaflet

GeoJSON: data is immutable. So the layer is not re-rendered when the prop changes. You can add the following check to see the layer on the map: {this.state.geoJSON && ( <GeoJSON ...
user avatar
3 votes

Leaflet Tilelayer from Mapbox with URL restrictions

I managed to fix this, and in case its useful for anyone else thought I'd offer the solution here! The issue turned out to have nothing to do with Leaflet or Mapbox, but instead to be about Gatsby ...
user avatar
3 votes
Accepted

Convert EPSG:4326 to EPSG:3857 in OpenLayers and React

This code converts the coordinates in Javascript convertCoordinates(lon, lat) { var x = (lon * 20037508.34) / 180; var y = Math.log(Math.tan(((90 + lat) * Math.PI) / 360)) / (Math.PI / 180); ...
user avatar
  • 255
3 votes
Accepted

Cropping specific area of map using Mapbox GL-JS

Mapbox GL JS is not using 2d context for canvas, but webgl context, so operation is not trivial. Logic goes like this: Polygon coordinates are converted to map pixel coordinates with map.project ...
user avatar
  • 17.8k
2 votes
Accepted

ReactJS TypeError "not a constructor" on running a component with Carto

The package is outdated. We moved it to another place. Please add as dependency @carto/carto.js instead of carto.js and substitute it in whatever file it's used in. npm install @carto/carto.js
user avatar
2 votes

Selecting only specific features not all, and dragging and dropping correctly

For the first issue you need to specify a filter option on the select interaction, for example to restrict the select to your polygonFeature: var select = new ol.interaction.Select({ condition: ...
user avatar
  • 10.1k
2 votes
Accepted

Import ol-ext to a React - Open Layers 6 project

For anyone coming to the same problem I managed to make it work and I implemented the Interaction Transform Features example. Here is the code below: JS: // Import stylesheets import './style.css'; ...
user avatar
2 votes

Convert EPSG:4326 to EPSG:3857 in OpenLayers and React

You can use proj4js to convert any coordinate system. Using EPSG code proj4("EPSG:4326", "EPSG:3857", [2,5]); Using projestion code var firstProjection = 'PROJCS["NAD83 / ...
user avatar
2 votes

Converting GeoJSON (or shapefile) data to FeatureLayer

The documentation is incorrect and will be fixed. You can use UniqueValueRenderer just fine with GeoJSONLayer. No need to convert the GeoJSON.
user avatar
2 votes
Accepted

Changing style of only selected polygons in L.geoJSON layer?

It would be simpler to let Leaflet do the desired change in style through the style option. Set initial opacity for features which have the desired color with the style function to some predefined ...
user avatar
  • 17.8k
2 votes

React-Leaflet: Marker has wrong position after zoom out

There is nothing wrong with the marker positioning, it just depends on the way marker icon is defined. Since you defined marker icon without iconAnchor option, marker is positioned so that center of ...
user avatar
  • 17.8k
2 votes

Putting different id in different paths on my Leaflet map

If you just need to add id to each path elements, you can be able to achieve that by simply using a jquery script. ## OPTION 1 : use jQuery once polygons are loaded This will do the job. Be Sure to ...
user avatar
  • 8,512
2 votes
Accepted

React-leaflet GeoJSON: change color of the layer after state

There are several ways how to deal with this. Since I'm not familiar with React, answer will be for plain HTML/JS. Country name is being input through input HTML tag: <label for="country"&...
user avatar
  • 17.8k
1 vote

Loading data from array in popup when country is clicked in React Leaflet

The loading of a .json file from hard disk is an asynchronous operation and thus it needs to specify a callback function to execute after the file is loaded. You could find more info in the following ...
user avatar
1 vote

How to serve thousands of clickable hexagons with react-leaflet

Leaflet and React, assuming nothing terrible happened, are pretty fast. I'd use the simulated 3G/mobile testing tools in Chrome or Firefox's dev tools to see if I could figure out where the bottleneck ...
user avatar
1 vote
Accepted

Adding data-driven elevation to Mapbox GL JS fill-extrusion-height

It's all about data preparation. You split your linestring in multiple smallest linestrings where you assign elevation to each. For the first one, take the start point from original linestring and ...
user avatar
  • 28.9k
1 vote
Accepted

How to add Marker on map click using OpenLayers 6?

Either the anchor should be specified as fractions of the image size (the default option) image: new Icon({ anchor: [0.5, 1], imgSize: [32, 48], src: "https://...
user avatar
  • 10.1k
1 vote

GeoJSON map color does not change

Use setStyle() instead of modifing the property. const onEachCountry = (country, layer) => { console.log(country.properties.color) //This shows me that some of the country colors has been ...
user avatar
1 vote
Accepted

Sorting GeoJSON features array by property value

As .geojson is a javascript object, apply Array.prototype.sort() on feature, as follow: const sortArrayofObjects = (property, order) => { var sortOrder = order === 'asc' ? 1 : -1; return ...
user avatar
  • 558
1 vote

Plotting on map Leaflet when I GeoJSON that comes polygon and mutipolygon (in the same JSON)

Firstly, I would say .geojson instead of .json as the first format contains both coordinate data and attributes which can be shown on map. Each .geojson file supports a specific type of geometry say ...
user avatar
  • 558
1 vote

Putting different id in different paths on my Leaflet map

Leaflet offers no way of assigning HTML id attribute to HTML path elements that represent vector layer feature. But since you just want a way to select desired path elements from the DOM structure, ...
user avatar
  • 17.8k
1 vote

The position and size of my Tile Map is incorrect when it is displayed in React-Leaflet

you'd better use L.imageOverlay(imageUrl, imageBounds).addTo(map); see example in: https://jsfiddle.net/user2314737/Lfzrqvet/
user avatar
  • 91
1 vote

Accessing ArcGIS data over HTTP

Isn't this what you are looking for: http://gis.infrastructure.gov.au/infrastructure/rest/services/KeyFreightRoute/KFR/MapServer/0/query Type "1=1" in the "Where" box and press &...
user avatar
  • 91
1 vote
Accepted

Leaflet (React-Leaflet) custom renderer

ok so after reading this SO answer I managed to implement something similar for react-leaflet. Currently it just uses the code of leaflet's Canvas _updateCircle method, but it's a start for different ...
user avatar
  • 131
1 vote

react-leaflet and clustering?

Here's what I did -- followed the install instructions at: https://github.com/YUzhva/react-leaflet-markercluster#readme Some of the demos here were also helpful: https://yuzhva.github.io/react-...
user avatar

Only top scored, non community-wiki answers of a minimum length are eligible