Forum Index > Trail Talk > GeoJPG 'web app' displays your own custom maps offline on iOS and Android
 Reply to topic
Previous :: Next Topic
Author Message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostTue Jan 11, 2022 8:11 pm 
Starting early spring last year the wife and I were out hiking most weeks. Of course the trips we do now are not as high/far/fast as they were back in the day. Early on I got to wondering if I could produce a web map that would (1) show GIS trail data and (2) work offline. Was such a thing doable? I have no clue how to write a native app that you get from an app store. Instead, my skill set revolves around writing code that runs in your browser. Over the last few years browsers have added features that make it possible to write a web app (i.e. one or more web pages) that (1) have the look and feel of a native app and (2) work offline. These are known as Progressive Web Apps (PWA). For example, the FindMeSAR (https://findmesar.com) web page I developed is a simple example of a PWA. But to tackle the map project I had in mind I knew I would need to learn considerably more about the ins/outs/gotchas of PWA coding. My early attempts to produce offline trail maps for our hikes last year were abysmal failures. Good thing our days of wandering around off trail are behind us. After climbing up the PWA learning curve a bit more this offline web map project was working at a proof of concept level. Coding progress slowed down over the summer - too much other stuff going on. But once the garden was harvested and the weather turned, I was able to focus more time on this effort and am now ready to share the initial release. Please keep in mind that I am not trying to compete with all the features in your favorite map native app. Instead, I am thinking about people that I will describe as ‘casual users’. For many of these folks they simply want to know where they are on the trail. Yes, there will be some more features added but I have not yet decided which ones. There are 2 parts to this project. 1. GeoJPG website at https://geojpg.com with documentation and an example map. For instructions on installing the web app, open the website and click “Website Menu”. 2. GeoJPG progressive web app. You can install maps when your device is online and then view the maps offline. It is important to carefully follow the installations instructions described on the website. https://geojpg.com/geojpg.html I look forward to hearing feedback anyone cares to share. And if anyone knows about other web app maps that work offline and show trails, I would enjoy hearing about it.

Fedor
Back to top Reply to topic Reply with quote Send private message
HikerJohn
Member
Member


Joined: 01 Sep 2008
Posts: 354 | TRs | Pics
Location: Daydreaming
HikerJohn
Member
PostWed Jan 12, 2022 12:14 am 
Hey Joe, Cool looking project! I used Avenza when I'm out on patrol-- I usually go to Airplane mode when I hit the trail to save battery, but Avenza continues to operate even without phone service. Is that what you wanted to know??

Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostWed Jan 12, 2022 5:57 am 
Avenza is a native app that you get from an app store. Other well known native apps for hiking include Topo Maps+, CalTopo, Gaia GPS, All Trails, Natural Atlas and OsmAnd+ Native apps do not run in a browser. GeoJPG is a different kind of critter. It is a web app and runs in a browser. It is not a native app. I am curious if anyon knows of other web apps that show trails and work offline.

Back to top Reply to topic Reply with quote Send private message
zimmertr
TJ Zimmerman



Joined: 24 Jun 2018
Posts: 1215 | TRs | Pics
Location: Issaquah
zimmertr
TJ Zimmerman
PostWed Jan 12, 2022 10:39 am 
Joey wrote:
I have no clue how to write a native app that you get from an app store. Instead, my skill set revolves around writing code that runs in your browser.
Have you looked at Apache Cordova? https://cordova.apache.org/ It's a framework that lets you build native mobile apps using web programming languages (JS, CSS, HTML). They're crossplatform too. Similar to Electron for desktops.

Back to top Reply to topic Reply with quote Send private message
Cyclopath
Faster than light



Joined: 20 Mar 2012
Posts: 7697 | TRs | Pics
Location: Seattle
Cyclopath
Faster than light
PostWed Jan 12, 2022 10:42 am 
How does this work with the mobile browser's tendency to refresh for no reason?

Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostWed Jan 12, 2022 10:48 am 
zimmertr wrote:
Have you looked at Apache Cordova?
No, I have not. Hard to see any benefit since the coding tech I am using produces something with the look and feel of a native app minus: 1. the hassle of getting accepted into an app store 2. the time required to learn Cordova

Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostWed Jan 12, 2022 10:53 am 
Cyclopath wrote:
How does this work with the mobile browser's tendency to refresh for no reason?
So far I have not experienced that problem nor have I read about that being a problem for other Progressive Web Apps (PWA). A PWA does not literally run in the same browser memory space that you use for surfing. Instead, as I understand it, a PWA is run by a copy of the browser code running in its own memory space.

Back to top Reply to topic Reply with quote Send private message
philfort
Member
Member


Joined: 02 Sep 2003
Posts: 437 | TRs | Pics
Location: seattle
philfort
Member
PostWed Jan 12, 2022 11:33 am 
I don't know much about PWAs, but I would worry about the battery drain of something running in a browser. I doubt it would be as efficient as a native app. Also, I don't trust the browser not to have unloaded pages from memory when I switch to it. Then you'd be screwed if you're somewhere without signal?

zimmertr
Back to top Reply to topic Reply with quote Send private message
Cyclopath
Faster than light



Joined: 20 Mar 2012
Posts: 7697 | TRs | Pics
Location: Seattle
Cyclopath
Faster than light
PostWed Jan 12, 2022 12:02 pm 
Joey wrote:
So far I have not experienced that problem nor have I read about that being a problem for other Progressive Web Apps (PWA). A PWA does not literally run in the same browser memory space that you use for surfing. Instead, as I understand it, a PWA is run by a copy of the browser code running in its own memory space.
For what it's worth, every phone I've ever had has refreshed pages when you returned to them after some amount of time. What happens if the "page" gets refreshed for whatever reason?

Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostWed Jan 12, 2022 12:06 pm 
philfort wrote:
Also, I don't trust the browser not to have unloaded pages from memory when I switch to it.
One of the main features of a PWA is that the necessary files are saved in a cache on the user's device. Turn your device off. Turn it back on. The cache with its files is still there. If that tech was not as dependable as other cell phone tech, then PWAs would not exist.

Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostWed Jan 12, 2022 12:13 pm 
Cyclopath wrote:
For what it's worth, every phone I've ever had has refreshed pages when you returned to them after some amount of time. What happens if the "page" gets refreshed for whatever reason?
When a non-PWA browser page is refreshed the code for that page comes from either (1) the browser's general purpose cache or (2) a server. After you install a PWA on your device then anytime any of those files are needed (PWA startup, page refresh, whatever), they come from the cache that is specific to that PWA. It turns out that many mainstream popular websites already have a PWA component and most folks are not aware of that. If a website has any functionality offline, it is most likely running as a PWA these days.

zimmertr
Back to top Reply to topic Reply with quote Send private message
HikerJohn
Member
Member


Joined: 01 Sep 2008
Posts: 354 | TRs | Pics
Location: Daydreaming
HikerJohn
Member
PostThu Jan 13, 2022 8:46 am 
Joey wrote:
GeoJPG is a different kind of critter. It is a web app and runs in a browser. It is not a native app.
Sorry, I missed that you were looking for a web app....

Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostTue Jan 23, 2024 12:56 pm 
When I started this thread I posted a version of GeoJPG that, looking back, was more of a proof of concept than anything useable as an offline map. The good news is that as of a few months ago I have been back to this project full time. This post is an overview of the project and status report. Map tiles Most map apps display maps as a series of images (‘tiles’) that are 256 pixels on each side. For example, here is a link that displays one tile for the Snoqualmie Pass area from Open Topo Map. https://c.tile.opentopomap.org/14/2666/5734.png The numbers that you see at the end of the above link are a standard naming convention that indicates the zoom level and georeference data. In other words, each of these tiles is a georeferenced image. When you buy a subscription for a map app part of that fee pays for the server and bandwidth to host and deliver the tiles to your device. GeoJPG also uses georeferenced images. However, those images (‘tiles’) can be any size and have an almost unlimited variety of content. Before any georeferenced map image can be installed on your device for offline use, that image has to be hosted on a server someplace. Good news. Google gives everyone 15GB of free storage. This means that georeferenced images for GeoJPG can be hosted on Google Drive for free. GeoJPG (offline maps) and GISsurfer (online maps) both use the Leaflet map API (Application Program Interface). That API can display georeferenced images. Below are 2 GISsurfer link that each display a georeferenced JPG that is hosted on Google Drive. These same georeferenced JPG images can be installed on almost any device for offline use by the GeoJPG web app. This GISsurfer map shows a small georeferenced JPG showing the Open Topo Map plus some reddish GIS trail data. Open Topo Map shows the OSM trail data. https://mappingsupport.com/p2/gissurfer.php?center=47.440193,-121.383390&zoom=13&basemap=USA_NAIP_aerial&data=WA_Kendall_Katwalk_small_open_topo_jpg^https://drive.google.com/uc?export=download&id=1z3PVLJOY_B4Km4LCBdnC_uHD17KpsW8L^47.416415,-121.427336,47.463960,-121.339445 The following GISsurfer map shows 2 big georeferenced JPGs showing scanned USGS topos plus a variety of GIS data. These maps have the best contour data for off trail travel. https://mappingsupport.com/p2/gissurfer.php?data=WA_US_2_south_big_usgs_gis_jpg^https://drive.google.com/uc?export=download&id=1Yz1oUnD3ITOypABfAf18Xy6qpoYlEzx9^47.609288,-121.586809,47.798570,-121.059465||WA_I-90_west_of_pass_big_usgs_gis_jpg^https://drive.google.com/uc?export=download&id=1ist8hh1mHwQGwVJnZH6eJ7FpY5eRibbE^47.386903,-121.761646,47.624562,-121.322193 GISsurfer screenshot mode The georeferenced JPGs that are displayed by the above map links were made with GISsurfer’s screenshot mode. This feature lets you takes a series of screenshots that (1) exactly adjoin and (2) are 100% map - the user interface is not on the screen. Because the screenshots exactly adjoin they are easy to stitch together into a larger image. You can also skip the stitching step and place each screenshot online. Either way, GISsurfer provides all the georeference data. I have made a bunch of georeferenced JPGs that cover much of the Washington State Cascades and Mt. Rainier National Park. One set shows the Open Topo Map and the other set shows the scanned USGS quads. All those JPGs are hosted on Google Drive. When I release GeoJPG v2 I will provide an easy way for anyone to install and use any of those maps offline. Of course, you are not limited to the georeferenced JPG maps that I made. Screenshot mode means you can make your own custom maps that show almost any data that GISsurfer can display. Note that Open Topo Map covers most of the world. Also, any georeferenced JPG image from any source can be viewed offline by GeoJPG as long as: 1. The JPG is in the Web mercator map projection 2. The JPG is online either on Google Drive or with a link that ends in .jpg 3. You know the latitude longitude for the 4 edges of the image For GISsurfer video and PDF tutorials, including screenshot mode, see https://mappingsupport.com/p2/gissurfer-help.html Progressive Web Apps (PWA, or just ‘web app’) Web apps are built with the same kind of coding (html, css and javascript) that drives web pages. The difference is that a web app includes some special coding and support files that allow the web app files to be installed on your device so the web app can work offline. The web app is installed in a dedicated part of your devices memory. The idea is that a web app will not display browser controls but instead will look to the user just like a native app.. Typically a web app can be installed on any device that has a browser. In fact, I am doing the GeoJPG development work on my windows 10 PC using the firefox browser. Of course before releasing GeoJPG v2 I will test everything on an iPhone, iPad and Android phone. One huge advantage of building web apps is that you only need to know one programming language. By contrast, if you are going to develop a native app for both iOS and Android then you need to know two programming languages - one for each operating system. The GeoJPG web app will *not* be available in any app store. Instead, you will open GeoJPG in your browser and follow a short series of steps to install it. Status of GeoJPG v2 In the world of software development it is common to realize that earlier code you wrote needs to be redone for one reason or another. We call it ‘refactoring’. I think most of that work is now done. One benefit of doing that work is that it will be much easier to maintain and enhance the code going forward. There is still one feature left to code. In addition to the web app there is also a web site with documentation. I have a version 2 of all the website files but I need to make a final pass through all that stuff. Also I plan to make at least one video tutorial. Finally, I should point out that GeoJPG is not intended to compete on features with CalTopo, All Trails, Gaia GPS, OsmAnd, etc. Instead, the goal is to let anyone have a high quality map on their device that works offline and provides basic features with no ads, no tracking, no signup - none of that nonsense. Version 2 will show your geolocation and various other features. One basic feature v2 will not have is GPX support. That feature is on the list for the next update. No one should ever be lost for the reason that they do not have a good offline map on their phone. Maybe GeoJPG can help fix that.

Josh Journey
Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostMon Feb 12, 2024 8:59 am 
Release date for GeoJPG version 2 is on track for March 19. View your own custom maps offline on iOS and Android with NO ads, NO tracking, NO signup and NO fees. Step 1. Use GISsurfer screenshot mode to make your own custom georeferenced JPG maps. For WA I am providing a bunch of maps you can use. Step 2. Host your JPG maps for free on Google Drive or any other server that provides a direct https link to the JPG. http links will not work. Step 3. Install the GeoJPG web app and install one or more JPG maps. You can view your maps online and offline. Below are some screenshots with brief descriptions. Left screenshot shows GeoJPG Menu items available offline. Right screenshot shows additional (blue) Menu items available when online.
Left screenshot - Zoom level with scale showing 1000 feet. Same zoom level used in GISsurfer to take the screenshots. Right screenshot - After zooming in one step. Scale now shows 500 feet. The JPG is slightly fuzzy but perfectly usable. Red symbol can be turned on/off to show the user’s geolocation
Left screenshot - What you see when your device is offline and you tap the geolocation symbol. Right screenshot - What you see when your device is online and you tap the geolocation symbol. For locations in the USA, the additional feature will access a NOAA server and display an hour-by-hour forecast for your location.
Left screenshot - Options for changing the coordinate format. If you have been in the military then you will likely recognize MGRS but you might not know that USNG is the same as MGRS. The difference is that USNG is written with spaces so it is easier to read. Middle screenshot - Geolocation display with USNG coordinates. Right screenshot - Map showing 1,000 meter USNG/MGRS grid lines and labels.
Left screenshot - GeoJPG scale showing 2,000 feet. Same zoom level was used in GISsurfer to take the screenshots. Right screenshot - GeoJPG scale showing 1,000 feet. Zooming in 1 step makes the JPG slightly fuzzy but it is still perfectly usable.
Screenshot left - Part of the GeoJPG ReadMe. Screenshot right - GeoJPG version number and list of any JPG maps that are installed.

Cyclopath
Back to top Reply to topic Reply with quote Send private message
Joey
verrry senior member



Joined: 05 Jun 2005
Posts: 2794 | TRs | Pics
Location: Redmond
Joey
verrry senior member
PostSat Mar 02, 2024 10:16 am 
The GeoJPG web app version 2 is ready for use. You can view your own custom maps offline on both iOS and Android devices with NO ads, NO tracking, NO signup and NO fees. I developed the GeoJPG web app as a public service and part of my way to ‘pay it forward’. This is not a commercial product of any nature. I am making this freely available simply because I can. GeoJPG is not available in any app store. To install it for offline use, open the web app link, tap “Yes” and then carefully follow the instructions you will see. Website: https://geojpg.com Web App: https://geojpg.com/geojpg.html You can either install georeferenced JPG maps that I made and uploaded to Google Drive or use GISsurfer's screenshot mode to make your own custom georeferenced JPG maps. The GeoJPG website has step-by-step instructions showing how to use GISsurfer's screenshot mode to make your first map for your own neighborhood. GISsurfer includes a basemap called “Open topo map” which is based on #OpenStreetMap data and covers most of the world. Making your own neighborhood map is a great way to learn how to use GISsurfer's screenshot mode. The instructions for making your first map also show how to place your JPG map on Google Drive for free. The GISsurfer website (https://gissurfer.com) has plenty of video and PDF tutorial links on the ‘Help’ page. Your custom JPG maps can show almost anything that GISsurfer can display including data hosted on ArcGIS servers, WMS servers, xyz tile servers and GPX tracks. The variety of maps you can make and view offline with the GeoJPG web app depends on your willingness to learn how to use GISsurfer to produce georeferenced JPG maps. While there will be additional features added to GeoJPG, the focus will be on providing basic offline map services that casual users will not find overwhelming. To find the georeferenced JPG maps that I made and anyone can use, open the GeoJPG website and tap “Menu - JPG maps anyone can use”. Some maps cover much of the Washington State Cascades, Mt Rainer National Park and part of the San Juan Islands. Other maps cover all of Ventura County California. You will see there are JPGs based on Open Topo Map and other JPGs made with the scanned USGS topos. Tip: You can install the GeoJPG screen icon twice. You can install Open Topo Map JPGs using one screen icon then open the other screen icon and install the USGS topo JPGs. If you prefer to learn by reading then you are in luck since I do not know how to write tech babble. I only know how to write plain simple clear English. Here is a PDF with an overview and some background. https://geojpg.com/pdf/geojpg-offline-web-maps.pdf If you prefer to learn by watching videos then by next weekend the GeoJPG website ‘Help’ page should have links to several videos.

Cyclopath
Back to top Reply to topic Reply with quote Send private message
   All times are GMT - 8 Hours
 Reply to topic
Forum Index > Trail Talk > GeoJPG 'web app' displays your own custom maps offline on iOS and Android
  Happy Birthday noahk!
Jump to:   
Search this topic:

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum