AndrewJBateman/ionic-angular-tutorial

:clipboard: App to show a map view of a location using Leaflet & the Ionic framework.

⚡ Ionic Angular Tutorial

• App to show a map view of user location with an animated marker using Leaflet, Leaflet Bouncemaker v1 & the Ionic framework.
• Tutorial code from Technbuzz with modifications
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Angular Tutorial
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration - By Samiullah Khan @Techbuzz
  • 📁 License
  • ✉️ Contact

📚 General info

• Leaflet has lots of options for map control & user interaction
• Leaflet Marker used to display clickable/draggable icons on the map
• Leaflet Bouncemaker v1 used to add bounce animation to the marker
• Angular no longer comes with linting by default so ESLint was added.

📷 Screenshots

📶 Technologies

• Ionic v6
• Angular v15
• Ionic/angular v6
• Ionicons
• Leaflet v1 free open-source JavaScript library for mobile-friendly interactive maps
• leaflet.bouncemarker v1 to make a Marker bounce when you add it on a map

💾 Setup

• Run npm i to install dependencies
• To start the server on localhost://8100 type: 'ionic serve'
• ng lint to lint project - the Ionic boilerplate is old and newer version add component to tab component pages. This causes lint errors error Component class names should end with one of these suffixes: "Component" (https://angular.io/styleguide#style-02-03) @angular-eslint/component-class-suffix. This could be fixed with a lot of filename changes etc.

💻 Code Examples

• Basic setup to show Big Ben on a map

ngOnInit() {
    this.map = L.map('map', {
      // center on the coordinates for Big Ben
      center: [51.50148, -0.12351],
      zoom: 15,
      renderer: L.canvas()
    })

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(this.map)

    setTimeout(() => {
      this.map.invalidateSize();
    }, 0)

  }

🆒 Features

• Leaflet map is free and does not require an API key.
• Leaflet Marker bounce is definitely cool

📋 Status & To-do list

• Status: Working
• To-do: Nothing

👏 Inspiration - By Samiullah Khan @Techbuzz

• Youtube: Add leaflet in Ionic Angular]
• Youtube: Leaflet markers, Popups and Circle
• Article: Add leaflet to Ionic Angular [Screencast]
• Article: Markers, Popups & Circle

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@gmail.com