Ionic with Onemap

Hi,

Anyone has sample codes to share using Ionic 3 and OneMap? Or which map/framework will be easiest for development on both web and mobile?

Appreciate any advice. Thanks.

One Historical Map (OHM) is developed based on Angular-Ionic Framework. However, we have yet to open-source OHM’s codes, I am deeply sorry about that.

OHM (Sample App): https://ohm.onemap.sg

Let’s not take this as an obstacle. I have found a great number of Github templates on your behalf. :slight_smile:

Talking about frameworks, are you relating it to a hybrid application?

What is a hybrid app?
Hybrid applications are web applications (or web pages) in the native browser, such as UIWebView in iOS and WebView in Android (not Safari or Chrome). Hybrid apps are developed using HTML, CSS and Javascript, and then wrapped in a native application using platforms like Cordova.

Generally, you have a few options.

  1. Ionic + Cordova (PhoneGap)
  2. React Native + ReactJS
  3. Titanium

For ease of development, you should go for Ionic + Cordova. (This is subjective to your skillsets.) The biggest downside is the slow performance on mobile.
Second, you might not be able to tap into the full range of capabilities on your phones.

For performance and components reusability, I will definitely go for React Native app. (Hot choice)
We have a react-native example on github,

Xamarin is another good option for performance and stability but it costs money. If budget is a concern, please abstain from Xamarin.

Tbh, there are a lot of technical and business considerations required for an App Development.
I will definitely recommend you to do a Proof-of-Concept. First, it is disposable. Second, it serves as an awesome platform to test out ideas.

Thanks kaicong. This is very helpful.
I was searching in the direction of Ionic with esri for a while. :blush:

That’s awesome.

If you have further questions, we welcome walk-ins from agencies, organisations and individuals.

Hi,

I like to borrow this thread on Ionic.

I followed the codes from this link and manged to display the leaflet map.

I made some changes trying to load onemap but not successful. No map displayed.
Is it possible to load onemap with Ionic? I am missing some codes?

Changes I made

index.html

I changed to

home.ts
leaflet.tileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’

I changed it to
leaflet.tileLayer(‘https://maps-{s}.onemap.sg/v3/Default/{z}/{x}/{y}.png’

Thank you for your time :slight_smile:

Hi pyssj,

I have tried the ionic 3 project and it works! :slight_smile:

Basically, in his initialization of the map, he chose to fit the entire basemap to the world. However, our OneMap could only be seen from zoom level 11 onwards to 19.

Hope that helps!

Regards,
Kai

Hi Kai,

Thank you so much! It works. :+1:
Gonna explore more.