Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by OpenStreet Map s'
How to Render OpenStreetMap in an Expo React Native Web App Using React Leaflet
Introduction OpenStreetMap (OSM) offers a free and open-source alternative to traditional map services like Google Maps. Integrating OSM into your Expo React Native web application can enhance user experience without incurring additional costs. In this guide, we'll walk you through the steps to render OpenStreetMap in an Expo web platform using the React Leaflet library.
Leaflet library and it's usecase
In the realm of web development, the ability to integrate interactive maps into applications has become increasingly valuable. From real estate listings to logistics and tracking, visualizing data geographically can enhance user experiences significantly. One of the most effective ways to accomplish this in React applications is through the React Leaflet library. This blog post delves into the ins and outs of React Leaflet, exploring its features, benefits, and various use cases.
The search for tiles: adventures in mapmaking with Stamen Toner, OSM and the German Federal Agency for Cartography
To make an online map, you just need two things: 1. the actual geographic things you want to display and 2. the background tileset. To make my map of collectible space invader mosaics, I needed the locations of each piece: and then, something to draw the locations on top of: the background tiles. (As we can see above, the map is decidedly not useful without the background :)!) For the first version of the map I used the beautiful high-contrast black-and-white tileset called Stamen Toner.
Leaflet Mini Map Not Displaying with Esri Basemaps
I am trying to add a mini map to my Leaflet map that uses Esri basemaps. However, the mini map is not displaying correctly. I have included the necessary libraries and followed the setup instructions, but I can't seem to get it to work. Below are the details of my implementation.
Put added three.js object from external js module on top of base map in Leaflet
I have a leafelt map app where first I initialize and add a tile layer like so: <body> <div id="map"></div> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script> // Initialize the Leaflet map var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); </script> <script type="module" src="/main.js"></script> </body> You can see I call an external JS...
Put added object from external js module onto of base map
I have a leafelt map app where first I initialize and add a tile layer like so: // Initialize the Leaflet map var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); However, I call an external JS file directly after that using a script tag of type module and calling a main.js file as src.
How to offset labels in Leaflet using field-based rotation & offset?
I have a small dataset displayed as points in Leaflet. Each point has 3 arrows (right, left, head) coming out of it and they are rotated based on 3 separate fields (rhead, lhead, head). i want the labels to appear at the end of the arrows, so I'm starting to work on the left labels first. Eventually, both the left and right labels will be at the end of their respective arrows and pull data from their own fields.
Offset & anchor field-based arrow SVGs in Leaflet
I have a leaflet web map displaying 13 points and 3 arrows diverging from each point (4 layers total). The map was exported from QGIS via QGIS2Web.
leaflet-simple-map-screenshoter cannot load my custom tiles
If I try to make screenshots with my custom tiles, it seems like they are not loaded. If I use mapbox or openstreet map tiles, I don't have any issues. In my browser if I use custom tiles it renders like this: When I make a screenshot, it looks like this: This is how I add my custom tiles to the leaflet. The drone tileLayer doesn't appear in screenshots.
Gamma correction of Sentinel - 2 imagery using leaflet
Image Stripes after applying a Gamma correction after normalization with this Sentinel2, 4 Band DN using leaflet (Complete Code) with this code: <body> <div id="map"></div> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.0/proj4.js"></script> <script src="https://unpkg.com/georaster"></script> <script src="https://unpkg.com/georaster-layer-for-leaflet"></script> <script...
Stuck with animation with openlayer
So I'm an a beginner to openlayer and there maps and not very javascript proficient, so I'm hoping someone here will help me fix my badly written code and make it run the right way instead of carrying me to docs. I'm trying to add a radar to openlayer which I believe in version 8.
Side-by-side leaflet map - How to add an array of layers to show on one side?
I want to create a side-by-side leaflet map and I use the resources available on github (https://github.com/digidem/leaflet-side-by-side). I have downloaded the code locally and I have created a map with two different sides. I have also added a button to activate and de-activate the splitter (when the splitter is off, there is only one map). I have also created a marker and a circle. The left map should show openstreetmap basemap, the right one (googlemaps basemap with the marker and the circle).
Use grouped layer control plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer
I want to use the grouped layer control plugin (github.com/ismyrnow/leaflet-groupedlayercontrol) with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer when selected/unselected in the layers control. But the markers don't appear on the map and with groupCheckboxes = true it also doesn't group the layers. How can I solve?
plotting hundreds to thousands of gps points on leaflet map using leaflet routing machine for react with typescript setup
I need a code to deploy all the gps points from CSV file through API on leaflet map using leaflet routing machine for react with typescript setup. I tried different approaches but nothing is working properly when giving hundreds or thousands of gps points to render.I already have the working setup of python API where I could fetch all the points. but when trying to render on map, map is not working properly.
Multiple on-the-fly filtering based on markers' features properties on Leaflet
I would like to filter my layer's markers (GeoJSON) according to multiple properties parameters simultaneously. How can I do this using the layer control?
Choropleth map layer not displaying in Leaflet
I have a web map showing various selectable features (point, lines, polygons) and am trying to add a choropleth layer of U.S. state data. The layer displays in the legend where I can toggle it on/off, but the color ramp data does not show, only the polygon outlines of each U.S. state. I have explored where the issue might be but cannot resolve this. Any thoughts? I have read others with similar issues that have posted to the GIS forum and it seems the group might have insightful feedback for others.
Draw line between China and South America through the Pacific Ocean
I am relatively new using Leaflet.js. I want to draw a polyline in Leaflet.js between China and South America through the Pacific Ocean. Instead, I can only draw this line through both places through the Indian Ocean, Africa and the Atlantic Ocean (as you can see in my image). I understand that this happen because of the CRS, but I can't figure any solution.
Leaflet - initial zoom referred to a layer
I am building a viewer with Leaflet API and OpenStreetMap base. I want that when I enter this viewer it shows me immediately in the initial visualization the extension of my layer that I am using. For this, I am using the getBounds function together with fitBounds, but it doesn't work for me.
Leaflet: how to prevent automatic zoom
Asked today Viewed 3 times I have created the beginnings of a web app which will track locations in real time. It's all working, but every time the location updates*, the zoom level refreshes to something that seems pre-defined. I would like the user to manually choose a zoom level (using the touchscreen) which will then stay at that level with each new location update (until the user changes it again).
Crop [Extract by mask] a raster layer in leaflet js
Asked today Viewed 4 times I want to clip a raster layer inside the leaflet. I have tried many methods, but none of them have been effective. The below code is what I have done so far. Can any one suggest me a method.
How to display flatgeobuf file in leafletjs?
Asked today Viewed 3 times I am trying to read flatgeobuf file in leaflet, but it returns blank.
Cannot save and load a map with Leaflet
Asked today Viewed 11 times I display a map and draw lines or polygons with Leaflet. Every thing works fine but I want to save the map with their draws, but I do not know how to do it. I have this code and I can save a png file but the file is empty. I am thinking it is the line 209 $mapa_data = $_POST['mapa_data']; because the variable $mapa_data is empty. How can I add the right value to $mapa_data?
Allowing user to add Markers, shapes, and more to the map
Asked today Viewed 4 times I will preface my question by letting you know that I am new to Leaflet and HTML. I am trying to make a map where a user can add markers and shapes on their end rather than having them pre-placed. As of right now, here is what I have for my HTML file.
Where to set CRS property in react-leaflet?
Asked today Viewed 2 times I am changing my reference system in my Leaflet app. I am using the react-leaflet library since I am building it with React.
Offset of markers and polygon depending on zoom level in Leaflet
I have run into a problem with a suspicious offset what comes to self created polygon using Leaflet. I am creating a website using NodeJS (and Pug for rendering the HTML itself). Using Leaflet, I would like to get a polygon drawn on the background map. I am adding the polygon using the old good var polygon = L.polygon([all coordinates], {color: 'red'}).addTo(map). However, the polygon's placement is not accurate.
The Battle of Interactive Geographic Visualization Part 6 - Greppo
PYTHON. DATA SCIENCE. GEOVISUALIZATION Using the Greppo Library to Create Beautiful, Interactive Geoplots Photo by Tobias on Unsplash In this series, we have already identified, five (5) ways of making beautiful geoscatter plots.
How to calculate the distance between a location and a way segment? Demo attached
For my question I have prepared a JsFiddle demo which works well and is fun to play around with: My question is neither about Javascript nor Openstreetmap though. It is about mathematics, please read on to see my problem. When you drag the marker around and release it, I send an Overpass API query to retrieve the way objects with non-empty highway tag and then draw them as blue Leaflet polylines with clickable popups attached to them.
Styling line using attribute from GeoJSON object in Leaflet?
I have a problem styling my lines using the exported attribute from QGIS from within Open Studio Code. I have attached screenshots to help better understand the problem. My popup is able to take values from the attributes within the js file to populate the Name and Length of the lines, however I cannot set the line color to my desired colors as listed from within the same file.
Retrieve map matched ways (and not just nodes) using OSRM and Overpass API
Asked today Viewed 4 times For my question I have prepared a jsFiddle demo requiring you to click at the map 5 times: If I understand this correctly, the OSRM does not care about ways. It only cares about nodes and their probabilities as shown in A Practical Guide to an Open-Source Map-Matching Approach for Big GPS Data: However for my application I need the map-matched ways.
Why does turf.nearestPointOnLine() return different distance when several nodes are passed at once?
Asked today Viewed 4 times For my question I have prepared a jsFiddle demo where you can drag a marker around and the nearest way is drawn in red color: function distancePointSegment(lat, lng, lat1, lng1, lat2, lng2) { var pt = turf.point([lng, lat]); var line = turf.lineString([ [lng1, lat1], [lng2, lat2] ]); var snapped = turf.nearestPointOnLine(line, pt); return snapped.properties.dist; } function distancePointSegmentBroken(lat, lng, list) { var pt = turf.point([lng, lat]); var line =...
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with OpenStreet Map
Contact OpenStreet Map, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack