├── src ├── pages │ ├── home │ │ ├── home.scss │ │ ├── home.ts │ │ └── home.html │ ├── about │ │ ├── about.scss │ │ ├── about.html │ │ └── about.ts │ ├── contact │ │ ├── contact.scss │ │ ├── contact.ts │ │ └── contact.html │ ├── tabs │ │ ├── tabs.html │ │ └── tabs.ts │ └── map │ │ ├── map.scss │ │ ├── map.html │ │ └── map.ts ├── app │ ├── app.html │ ├── main.ts │ ├── app.scss │ ├── app.component.ts │ └── app.module.ts ├── assets │ ├── icon │ │ └── favicon.ico │ ├── images │ │ ├── layers.png │ │ ├── layers-2x.png │ │ ├── marker-icon.png │ │ ├── marker-icon-2x.png │ │ └── marker-shadow.png │ └── leaflet.css ├── manifest.json ├── declarations.d.ts ├── service-worker.js ├── index.html └── theme │ └── variables.scss ├── resources ├── icon.png ├── splash.png ├── ios │ ├── icon │ │ ├── icon.png │ │ ├── icon-40.png │ │ ├── icon-50.png │ │ ├── icon-60.png │ │ ├── icon-72.png │ │ ├── icon-76.png │ │ ├── icon@2x.png │ │ ├── icon-40@2x.png │ │ ├── icon-40@3x.png │ │ ├── icon-50@2x.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72@2x.png │ │ ├── icon-76@2x.png │ │ ├── icon-small.png │ │ ├── icon-83.5@2x.png │ │ ├── icon-small@2x.png │ │ └── icon-small@3x.png │ └── splash │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default~iphone.png │ │ ├── Default@2x~iphone.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Landscape@2x~ipad.png │ │ └── Default-Portrait@2x~ipad.png └── android │ ├── icon │ ├── drawable-hdpi-icon.png │ ├── drawable-ldpi-icon.png │ ├── drawable-mdpi-icon.png │ ├── drawable-xhdpi-icon.png │ ├── drawable-xxhdpi-icon.png │ └── drawable-xxxhdpi-icon.png │ └── splash │ ├── drawable-land-hdpi-screen.png │ ├── drawable-land-ldpi-screen.png │ ├── drawable-land-mdpi-screen.png │ ├── drawable-land-xhdpi-screen.png │ ├── drawable-land-xxhdpi-screen.png │ ├── drawable-port-hdpi-screen.png │ ├── drawable-port-ldpi-screen.png │ ├── drawable-port-mdpi-screen.png │ ├── drawable-port-xhdpi-screen.png │ ├── drawable-port-xxhdpi-screen.png │ ├── drawable-land-xxxhdpi-screen.png │ └── drawable-port-xxxhdpi-screen.png ├── ionic.config.json ├── tslint.json ├── .editorconfig ├── .gitignore ├── tsconfig.json ├── README.md ├── projectSteps.md ├── package.json └── config.xml /src/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/app/app.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/pages/about/about.scss: -------------------------------------------------------------------------------- 1 | page-about { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/contact/contact.scss: -------------------------------------------------------------------------------- 1 | page-contact { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/icon.png -------------------------------------------------------------------------------- /resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/splash.png -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion-map-leaflet", 3 | "app_id": "", 4 | "type": "ionic-angular" 5 | } 6 | -------------------------------------------------------------------------------- /resources/ios/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon.png -------------------------------------------------------------------------------- /src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/src/assets/images/layers.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-40.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-50.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-60.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-72.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-76.png -------------------------------------------------------------------------------- /resources/ios/icon/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon@2x.png -------------------------------------------------------------------------------- /src/assets/images/layers-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/src/assets/images/layers-2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-40@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-40@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-50@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-60@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-60@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-72@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-76@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-small.png -------------------------------------------------------------------------------- /src/assets/images/marker-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/src/assets/images/marker-icon.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-83.5@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-small@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/icon/icon-small@3x.png -------------------------------------------------------------------------------- /src/assets/images/marker-icon-2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/src/assets/images/marker-icon-2x.png -------------------------------------------------------------------------------- /src/assets/images/marker-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/src/assets/images/marker-shadow.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-667h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-667h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default@2x~iphone.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-hdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/icon/drawable-hdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-ldpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/icon/drawable-ldpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-mdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/icon/drawable-mdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/icon/drawable-xhdpi-icon.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-Portrait~ipad.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/icon/drawable-xxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/icon/drawable-xxxhdpi-icon.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-568h@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-568h@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-Landscape-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-Landscape~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-Landscape@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/ios/splash/Default-Portrait@2x~ipad.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-land-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-land-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-land-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-land-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-land-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-port-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-port-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-port-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-port-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-port-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-land-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SBejga/ionic2-map-leaflet/HEAD/resources/android/splash/drawable-port-xxxhdpi-screen.png -------------------------------------------------------------------------------- /src/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /src/pages/tabs/tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/pages/about/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | About 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/pages/map/map.scss: -------------------------------------------------------------------------------- 1 | page-map { 2 | .map-container { 3 | position: absolute; 4 | top: 0px; 5 | bottom: 0px; 6 | 7 | width: 100%; 8 | height: 100%; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-duplicate-variable": true, 4 | "no-unused-variable": [ 5 | true 6 | ] 7 | }, 8 | "rulesDirectory": [ 9 | "node_modules/tslint-eslint-rules/dist/rules" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { NavController } from 'ionic-angular'; 4 | 5 | @Component({ 6 | selector: 'page-home', 7 | templateUrl: 'home.html' 8 | }) 9 | export class HomePage { 10 | 11 | constructor(public navCtrl: NavController) { 12 | 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/about/about.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { NavController } from 'ionic-angular'; 4 | 5 | @Component({ 6 | selector: 'page-about', 7 | templateUrl: 'about.html' 8 | }) 9 | export class AboutPage { 10 | 11 | constructor(public navCtrl: NavController) { 12 | 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic", 3 | "short_name": "Ionic", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/imgs/logo.png", 8 | "sizes": "512x512", 9 | "type": "image/png" 10 | }], 11 | "background_color": "#4e8ef7", 12 | "theme_color": "#4e8ef7" 13 | } -------------------------------------------------------------------------------- /src/pages/contact/contact.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { NavController } from 'ionic-angular'; 4 | 5 | @Component({ 6 | selector: 'page-contact', 7 | templateUrl: 'contact.html' 8 | }) 9 | export class ContactPage { 10 | 11 | constructor(public navCtrl: NavController) { 12 | 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Home 4 | 5 | 6 | 7 | 8 |

Ionic 2 Map Leaflet with OpenStreetMap

9 |

10 | Example App of Ionic 2 using Leaflet and OpenStreetMap Layers to show a Map. 11 |

12 | 13 | -------------------------------------------------------------------------------- /src/pages/contact/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Contact 5 | 6 | 7 | 8 | 9 | 10 | 11 | Follow us on Twitter 12 | 13 | 14 | @ionicframework 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | 10 | # We recommend you to keep these unchanged 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | insert_final_newline = true 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /src/pages/map/map.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | Map 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /src/pages/tabs/tabs.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { HomePage } from '../home/home'; 4 | import { AboutPage } from '../about/about'; 5 | import { ContactPage } from '../contact/contact'; 6 | import { MapPage } from '../map/map'; 7 | 8 | @Component({ 9 | templateUrl: 'tabs.html' 10 | }) 11 | export class TabsPage { 12 | // this tells the tabs component which Pages 13 | // should be each tab's root Page 14 | tab1Root: any = HomePage; 15 | tabRootMap: any = MapPage; 16 | 17 | constructor() { 18 | 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.tmp 8 | *.tmp.* 9 | log.txt 10 | *.sublime-project 11 | *.sublime-workspace 12 | .vscode/ 13 | npm-debug.log* 14 | 15 | .idea/ 16 | .sass-cache/ 17 | .tmp/ 18 | .versions/ 19 | coverage/ 20 | dist/ 21 | node_modules/ 22 | tmp/ 23 | temp/ 24 | hooks/ 25 | platforms/ 26 | plugins/ 27 | plugins/android.json 28 | plugins/ios.json 29 | www/ 30 | $RECYCLE.BIN/ 31 | 32 | .DS_Store 33 | Thumbs.db 34 | UserInterfaceState.xcuserstate 35 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "module": "es2015", 12 | "moduleResolution": "node", 13 | "sourceMap": true, 14 | "target": "es5" 15 | }, 16 | "include": [ 17 | "src/**/*.ts" 18 | ], 19 | "exclude": [ 20 | "node_modules" 21 | ], 22 | "compileOnSave": false, 23 | "atom": { 24 | "rewriteTsconfig": false 25 | } 26 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ionic 2 Leaflet Map Example 2 | 3 | Ionic 2 Example App with Leaflet using OpenStreetMap Layers. 4 | 5 | ## how to continue 6 | 7 | git clone https://github.com/SBejga/ionic2-map-leaflet 8 | cd ionic2-map-leaflet 9 | npm install 10 | 11 | ## feature branches 12 | 13 | to show some more features with OSM Map and Leaflet. I create branches: 14 | 15 | - [Geolocation](https://github.com/SBejga/ionic2-map-leaflet/tree/geolocation) 16 | 17 | ## steps to reproduce this project 18 | 19 | You can find the steps I did to reach this state of the project in [projectSteps.md](projectSteps.md) 20 | -------------------------------------------------------------------------------- /projectSteps.md: -------------------------------------------------------------------------------- 1 | ### how to build to this step 2 | 3 | # ionic start 4 | ionic start ionic2-map-leaflet tabs --v2 5 | 6 | # --- commit --- 7 | 8 | # add leaflet lib 9 | mkdir src/assets/images/ 10 | cp node_modules/leaflet/dist/leaflet.css src/assets 11 | cp node_modules/leaflet/dist/images/* src/assets/images 12 | 13 | # add page to show map 14 | ionic g page map 15 | # update 'src/pages/map/*' 16 | # update 'src/pages/tabs/*' 17 | # update declarations, entryComponents in 'app.module.ts' 18 | # include `external` leaflet.css from assets in 'index.html' 19 | 20 | # --- commit --- 21 | -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Declaration files are how the Typescript compiler knows about the type information(or shape) of an object. 3 | They're what make intellisense work and make Typescript know all about your code. 4 | 5 | A wildcard module is declared below to allow third party libraries to be used in an app even if they don't 6 | provide their own type declarations. 7 | 8 | To learn more about using third party libraries in an Ionic app, check out the docs here: 9 | http://ionicframework.com/docs/v2/resources/third-party-libs/ 10 | 11 | For more info on type definition files, check out the Typescript docs here: 12 | https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 13 | */ 14 | declare module '*'; -------------------------------------------------------------------------------- /src/app/app.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Global Sass 5 | // -------------------------------------------------- 6 | // Put style rules here that you want to apply globally. These 7 | // styles are for the entire app and not just one component. 8 | // Additionally, this file can be also used as an entry point 9 | // to import other Sass files to be included in the output CSS. 10 | // 11 | // Shared Sass variables, which can be used to adjust Ionic's 12 | // default Sass variables, belong in "theme/variables.scss". 13 | // 14 | // To declare rules for a specific mode, create a child rule 15 | // for the .md, .ios, or .wp mode classes. The mode class is 16 | // automatically applied to the element in the app. 17 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Platform } from 'ionic-angular'; 3 | import { StatusBar } from '@ionic-native/status-bar'; 4 | import { SplashScreen } from '@ionic-native/splash-screen'; 5 | 6 | import { TabsPage } from '../pages/tabs/tabs'; 7 | 8 | 9 | @Component({ 10 | templateUrl: 'app.html' 11 | }) 12 | export class MyApp { 13 | rootPage:any = TabsPage; 14 | 15 | constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { 16 | platform.ready().then(() => { 17 | // Okay, so the platform is ready and our plugins are available. 18 | // Here you can do any higher level native things you might need. 19 | statusBar.styleDefault(); 20 | splashScreen.hide(); 21 | }); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Check out https://googlechrome.github.io/sw-toolbox/docs/master/index.html for 3 | * more info on how to use sw-toolbox to custom configure your service worker. 4 | */ 5 | 6 | 7 | 'use strict'; 8 | importScripts('./build/sw-toolbox.js'); 9 | 10 | self.toolbox.options.cache = { 11 | name: 'ionic-cache' 12 | }; 13 | 14 | // pre-cache our key assets 15 | self.toolbox.precache( 16 | [ 17 | './build/main.js', 18 | './build/main.css', 19 | './build/polyfills.js', 20 | 'index.html', 21 | 'manifest.json' 22 | ] 23 | ); 24 | 25 | // dynamically cache any other local assets 26 | self.toolbox.router.any('/*', self.toolbox.cacheFirst); 27 | 28 | // for any other requests go to the network, cache, 29 | // and then only use that cached resource if your user goes offline 30 | self.toolbox.router.default = self.toolbox.networkFirst; -------------------------------------------------------------------------------- /src/pages/map/map.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, NavParams } from 'ionic-angular'; 3 | 4 | import L from "leaflet"; 5 | 6 | /* 7 | Generated class for the Map page. 8 | 9 | See http://ionicframework.com/docs/v2/components/#navigation for more info on 10 | Ionic pages and navigation. 11 | */ 12 | @Component({ 13 | selector: 'page-map', 14 | templateUrl: 'map.html' 15 | }) 16 | export class MapPage { 17 | map: L.Map; 18 | center: L.PointTuple; 19 | 20 | constructor(public navCtrl: NavController, public navParams: NavParams) {} 21 | 22 | ionViewDidLoad() { 23 | console.log('ionViewDidLoad MapPage'); 24 | 25 | //set map center 26 | //this.center = [48.137154, 11.576124]; //Munich 27 | this.center = [48.775556, 9.182778]; //Stuttgart 28 | 29 | //setup leaflet map 30 | this.initMap(); 31 | } 32 | 33 | initMap() { 34 | this.map = L.map('map', { 35 | center: this.center, 36 | zoom: 13 37 | }); 38 | 39 | //Add OSM Layer 40 | L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png") 41 | .addTo(this.map); 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { ErrorHandler, NgModule } from '@angular/core'; 3 | 4 | import { StatusBar } from '@ionic-native/status-bar'; 5 | import { SplashScreen } from '@ionic-native/splash-screen'; 6 | 7 | import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 8 | import { MyApp } from './app.component'; 9 | import { AboutPage } from '../pages/about/about'; 10 | import { ContactPage } from '../pages/contact/contact'; 11 | import { HomePage } from '../pages/home/home'; 12 | import { TabsPage } from '../pages/tabs/tabs'; 13 | import { MapPage } from '../pages/map/map'; 14 | 15 | @NgModule({ 16 | declarations: [ 17 | MyApp, 18 | AboutPage, 19 | ContactPage, 20 | HomePage, 21 | TabsPage, 22 | MapPage 23 | ], 24 | imports: [ 25 | BrowserModule, 26 | IonicModule.forRoot(MyApp) 27 | ], 28 | bootstrap: [IonicApp], 29 | entryComponents: [ 30 | MyApp, 31 | AboutPage, 32 | ContactPage, 33 | HomePage, 34 | TabsPage, 35 | MapPage 36 | ], 37 | providers: [ 38 | StatusBar, 39 | SplashScreen, 40 | {provide: ErrorHandler, useClass: IonicErrorHandler} 41 | ] 42 | }) 43 | export class AppModule {} 44 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion2-map-leaflet", 3 | "author": "Sebastian Bejga", 4 | "homepage": "https://github.com/SBejga/ionic2-map-leaflet", 5 | "private": true, 6 | "scripts": { 7 | "clean": "ionic-app-scripts clean", 8 | "build": "ionic-app-scripts build", 9 | "ionic:build": "ionic-app-scripts build", 10 | "ionic:serve": "ionic-app-scripts serve" 11 | }, 12 | "dependencies": { 13 | "@angular/common": "4.1.3", 14 | "@angular/compiler": "4.1.3", 15 | "@angular/compiler-cli": "4.1.3", 16 | "@angular/core": "4.1.3", 17 | "@angular/forms": "4.1.3", 18 | "@angular/http": "4.1.3", 19 | "@angular/platform-browser": "4.1.3", 20 | "@angular/platform-browser-dynamic": "4.1.3", 21 | "@angular/platform-server": "4.1.3", 22 | "@ionic-native/core": "3.10.2", 23 | "@ionic-native/splash-screen": "3.10.2", 24 | "@ionic-native/status-bar": "3.10.2", 25 | "@ionic/storage": "2.0.1", 26 | "@types/leaflet": "^1.0.59", 27 | "ionic-angular": "3.4.2", 28 | "ionicons": "3.0.0", 29 | "leaflet": "^1.0.3", 30 | "rxjs": "5.4.0", 31 | "sw-toolbox": "3.6.0", 32 | "zone.js": "0.8.12" 33 | }, 34 | "devDependencies": { 35 | "@ionic/app-scripts": "1.3.7", 36 | "@ionic/cli-plugin-ionic-angular": "1.3.1", 37 | "typescript": "2.3.3" 38 | }, 39 | "cordovaPlugins": [ 40 | "cordova-plugin-whitelist", 41 | "cordova-plugin-console", 42 | "cordova-plugin-statusbar", 43 | "cordova-plugin-device", 44 | "cordova-plugin-splashscreen", 45 | "ionic-plugin-keyboard" 46 | ], 47 | "cordovaPlatforms": [ 48 | "ios", 49 | { 50 | "platform": "ios", 51 | "version": "", 52 | "locator": "ios" 53 | } 54 | ], 55 | "description": "ion-map-leaflet: An Ionic project" 56 | } 57 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | ion-map-leaflet 4 | An awesome Ionic/Cordova app. 5 | Ionic Framework Team 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/v2/theming/ 3 | $font-path: "../assets/fonts"; 4 | 5 | @import "ionic.globals"; 6 | 7 | 8 | // Shared Variables 9 | // -------------------------------------------------- 10 | // To customize the look and feel of this app, you can override 11 | // the Sass variables found in Ionic's source scss files. 12 | // To view all the possible Ionic variables, see: 13 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 14 | 15 | 16 | 17 | 18 | // Named Color Variables 19 | // -------------------------------------------------- 20 | // Named colors makes it easy to reuse colors on various components. 21 | // It's highly recommended to change the default colors 22 | // to match your app's branding. Ionic uses a Sass map of 23 | // colors so you can add, rename and remove colors as needed. 24 | // The "primary" color is the only required color in the map. 25 | 26 | $colors: ( 27 | primary: #387ef5, 28 | secondary: #32db64, 29 | danger: #f53d3d, 30 | light: #f4f4f4, 31 | dark: #222 32 | ); 33 | 34 | 35 | // App iOS Variables 36 | // -------------------------------------------------- 37 | // iOS only Sass variables can go here 38 | 39 | 40 | 41 | 42 | // App Material Design Variables 43 | // -------------------------------------------------- 44 | // Material Design only Sass variables can go here 45 | 46 | 47 | 48 | 49 | // App Windows Variables 50 | // -------------------------------------------------- 51 | // Windows only Sass variables can go here 52 | 53 | 54 | 55 | 56 | // App Theme 57 | // -------------------------------------------------- 58 | // Ionic apps can have different themes applied, which can 59 | // then be future customized. This import comes last 60 | // so that the above variables are used and Ionic's 61 | // default are overridden. 62 | 63 | @import "ionic.theme.default"; 64 | 65 | 66 | // Ionicons 67 | // -------------------------------------------------- 68 | // The premium icon font for Ionic. For more info, please see: 69 | // http://ionicframework.com/docs/v2/ionicons/ 70 | 71 | @import "ionic.ionicons"; 72 | 73 | 74 | // Fonts 75 | // -------------------------------------------------- 76 | 77 | @import "roboto"; 78 | @import "noto-sans"; 79 | -------------------------------------------------------------------------------- /src/assets/leaflet.css: -------------------------------------------------------------------------------- 1 | /* required styles */ 2 | 3 | .leaflet-pane, 4 | .leaflet-tile, 5 | .leaflet-marker-icon, 6 | .leaflet-marker-shadow, 7 | .leaflet-tile-container, 8 | .leaflet-pane > svg, 9 | .leaflet-pane > canvas, 10 | .leaflet-zoom-box, 11 | .leaflet-image-layer, 12 | .leaflet-layer { 13 | position: absolute; 14 | left: 0; 15 | top: 0; 16 | } 17 | .leaflet-container { 18 | overflow: hidden; 19 | } 20 | .leaflet-tile, 21 | .leaflet-marker-icon, 22 | .leaflet-marker-shadow { 23 | -webkit-user-select: none; 24 | -moz-user-select: none; 25 | user-select: none; 26 | -webkit-user-drag: none; 27 | } 28 | /* Safari renders non-retina tile on retina better with this, but Chrome is worse */ 29 | .leaflet-safari .leaflet-tile { 30 | image-rendering: -webkit-optimize-contrast; 31 | } 32 | /* hack that prevents hw layers "stretching" when loading new tiles */ 33 | .leaflet-safari .leaflet-tile-container { 34 | width: 1600px; 35 | height: 1600px; 36 | -webkit-transform-origin: 0 0; 37 | } 38 | .leaflet-marker-icon, 39 | .leaflet-marker-shadow { 40 | display: block; 41 | } 42 | /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ 43 | /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ 44 | .leaflet-container .leaflet-overlay-pane svg, 45 | .leaflet-container .leaflet-marker-pane img, 46 | .leaflet-container .leaflet-shadow-pane img, 47 | .leaflet-container .leaflet-tile-pane img, 48 | .leaflet-container img.leaflet-image-layer { 49 | max-width: none !important; 50 | } 51 | 52 | .leaflet-container.leaflet-touch-zoom { 53 | -ms-touch-action: pan-x pan-y; 54 | touch-action: pan-x pan-y; 55 | } 56 | .leaflet-container.leaflet-touch-drag { 57 | -ms-touch-action: pinch-zoom; 58 | } 59 | .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom { 60 | -ms-touch-action: none; 61 | touch-action: none; 62 | } 63 | .leaflet-tile { 64 | filter: inherit; 65 | visibility: hidden; 66 | } 67 | .leaflet-tile-loaded { 68 | visibility: inherit; 69 | } 70 | .leaflet-zoom-box { 71 | width: 0; 72 | height: 0; 73 | -moz-box-sizing: border-box; 74 | box-sizing: border-box; 75 | z-index: 800; 76 | } 77 | /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */ 78 | .leaflet-overlay-pane svg { 79 | -moz-user-select: none; 80 | } 81 | 82 | .leaflet-pane { z-index: 400; } 83 | 84 | .leaflet-tile-pane { z-index: 200; } 85 | .leaflet-overlay-pane { z-index: 400; } 86 | .leaflet-shadow-pane { z-index: 500; } 87 | .leaflet-marker-pane { z-index: 600; } 88 | .leaflet-tooltip-pane { z-index: 650; } 89 | .leaflet-popup-pane { z-index: 700; } 90 | 91 | .leaflet-map-pane canvas { z-index: 100; } 92 | .leaflet-map-pane svg { z-index: 200; } 93 | 94 | .leaflet-vml-shape { 95 | width: 1px; 96 | height: 1px; 97 | } 98 | .lvml { 99 | behavior: url(#default#VML); 100 | display: inline-block; 101 | position: absolute; 102 | } 103 | 104 | 105 | /* control positioning */ 106 | 107 | .leaflet-control { 108 | position: relative; 109 | z-index: 800; 110 | pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ 111 | pointer-events: auto; 112 | } 113 | .leaflet-top, 114 | .leaflet-bottom { 115 | position: absolute; 116 | z-index: 1000; 117 | pointer-events: none; 118 | } 119 | .leaflet-top { 120 | top: 0; 121 | } 122 | .leaflet-right { 123 | right: 0; 124 | } 125 | .leaflet-bottom { 126 | bottom: 0; 127 | } 128 | .leaflet-left { 129 | left: 0; 130 | } 131 | .leaflet-control { 132 | float: left; 133 | clear: both; 134 | } 135 | .leaflet-right .leaflet-control { 136 | float: right; 137 | } 138 | .leaflet-top .leaflet-control { 139 | margin-top: 10px; 140 | } 141 | .leaflet-bottom .leaflet-control { 142 | margin-bottom: 10px; 143 | } 144 | .leaflet-left .leaflet-control { 145 | margin-left: 10px; 146 | } 147 | .leaflet-right .leaflet-control { 148 | margin-right: 10px; 149 | } 150 | 151 | 152 | /* zoom and fade animations */ 153 | 154 | .leaflet-fade-anim .leaflet-tile { 155 | will-change: opacity; 156 | } 157 | .leaflet-fade-anim .leaflet-popup { 158 | opacity: 0; 159 | -webkit-transition: opacity 0.2s linear; 160 | -moz-transition: opacity 0.2s linear; 161 | -o-transition: opacity 0.2s linear; 162 | transition: opacity 0.2s linear; 163 | } 164 | .leaflet-fade-anim .leaflet-map-pane .leaflet-popup { 165 | opacity: 1; 166 | } 167 | .leaflet-zoom-animated { 168 | -webkit-transform-origin: 0 0; 169 | -ms-transform-origin: 0 0; 170 | transform-origin: 0 0; 171 | } 172 | .leaflet-zoom-anim .leaflet-zoom-animated { 173 | will-change: transform; 174 | } 175 | .leaflet-zoom-anim .leaflet-zoom-animated { 176 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); 177 | -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); 178 | -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1); 179 | transition: transform 0.25s cubic-bezier(0,0,0.25,1); 180 | } 181 | .leaflet-zoom-anim .leaflet-tile, 182 | .leaflet-pan-anim .leaflet-tile { 183 | -webkit-transition: none; 184 | -moz-transition: none; 185 | -o-transition: none; 186 | transition: none; 187 | } 188 | 189 | .leaflet-zoom-anim .leaflet-zoom-hide { 190 | visibility: hidden; 191 | } 192 | 193 | 194 | /* cursors */ 195 | 196 | .leaflet-interactive { 197 | cursor: pointer; 198 | } 199 | .leaflet-grab { 200 | cursor: -webkit-grab; 201 | cursor: -moz-grab; 202 | } 203 | .leaflet-crosshair, 204 | .leaflet-crosshair .leaflet-interactive { 205 | cursor: crosshair; 206 | } 207 | .leaflet-popup-pane, 208 | .leaflet-control { 209 | cursor: auto; 210 | } 211 | .leaflet-dragging .leaflet-grab, 212 | .leaflet-dragging .leaflet-grab .leaflet-interactive, 213 | .leaflet-dragging .leaflet-marker-draggable { 214 | cursor: move; 215 | cursor: -webkit-grabbing; 216 | cursor: -moz-grabbing; 217 | } 218 | 219 | /* marker & overlays interactivity */ 220 | .leaflet-marker-icon, 221 | .leaflet-marker-shadow, 222 | .leaflet-image-layer, 223 | .leaflet-pane > svg path, 224 | .leaflet-tile-container { 225 | pointer-events: none; 226 | } 227 | 228 | .leaflet-marker-icon.leaflet-interactive, 229 | .leaflet-image-layer.leaflet-interactive, 230 | .leaflet-pane > svg path.leaflet-interactive { 231 | pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */ 232 | pointer-events: auto; 233 | } 234 | 235 | /* visual tweaks */ 236 | 237 | .leaflet-container { 238 | background: #ddd; 239 | outline: 0; 240 | } 241 | .leaflet-container a { 242 | color: #0078A8; 243 | } 244 | .leaflet-container a.leaflet-active { 245 | outline: 2px solid orange; 246 | } 247 | .leaflet-zoom-box { 248 | border: 2px dotted #38f; 249 | background: rgba(255,255,255,0.5); 250 | } 251 | 252 | 253 | /* general typography */ 254 | .leaflet-container { 255 | font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; 256 | } 257 | 258 | 259 | /* general toolbar styles */ 260 | 261 | .leaflet-bar { 262 | box-shadow: 0 1px 5px rgba(0,0,0,0.65); 263 | border-radius: 4px; 264 | } 265 | .leaflet-bar a, 266 | .leaflet-bar a:hover { 267 | background-color: #fff; 268 | border-bottom: 1px solid #ccc; 269 | width: 26px; 270 | height: 26px; 271 | line-height: 26px; 272 | display: block; 273 | text-align: center; 274 | text-decoration: none; 275 | color: black; 276 | } 277 | .leaflet-bar a, 278 | .leaflet-control-layers-toggle { 279 | background-position: 50% 50%; 280 | background-repeat: no-repeat; 281 | display: block; 282 | } 283 | .leaflet-bar a:hover { 284 | background-color: #f4f4f4; 285 | } 286 | .leaflet-bar a:first-child { 287 | border-top-left-radius: 4px; 288 | border-top-right-radius: 4px; 289 | } 290 | .leaflet-bar a:last-child { 291 | border-bottom-left-radius: 4px; 292 | border-bottom-right-radius: 4px; 293 | border-bottom: none; 294 | } 295 | .leaflet-bar a.leaflet-disabled { 296 | cursor: default; 297 | background-color: #f4f4f4; 298 | color: #bbb; 299 | } 300 | 301 | .leaflet-touch .leaflet-bar a { 302 | width: 30px; 303 | height: 30px; 304 | line-height: 30px; 305 | } 306 | 307 | 308 | /* zoom control */ 309 | 310 | .leaflet-control-zoom-in, 311 | .leaflet-control-zoom-out { 312 | font: bold 18px 'Lucida Console', Monaco, monospace; 313 | text-indent: 1px; 314 | } 315 | .leaflet-control-zoom-out { 316 | font-size: 20px; 317 | } 318 | 319 | .leaflet-touch .leaflet-control-zoom-in { 320 | font-size: 22px; 321 | } 322 | .leaflet-touch .leaflet-control-zoom-out { 323 | font-size: 24px; 324 | } 325 | 326 | 327 | /* layers control */ 328 | 329 | .leaflet-control-layers { 330 | box-shadow: 0 1px 5px rgba(0,0,0,0.4); 331 | background: #fff; 332 | border-radius: 5px; 333 | } 334 | .leaflet-control-layers-toggle { 335 | background-image: url(images/layers.png); 336 | width: 36px; 337 | height: 36px; 338 | } 339 | .leaflet-retina .leaflet-control-layers-toggle { 340 | background-image: url(images/layers-2x.png); 341 | background-size: 26px 26px; 342 | } 343 | .leaflet-touch .leaflet-control-layers-toggle { 344 | width: 44px; 345 | height: 44px; 346 | } 347 | .leaflet-control-layers .leaflet-control-layers-list, 348 | .leaflet-control-layers-expanded .leaflet-control-layers-toggle { 349 | display: none; 350 | } 351 | .leaflet-control-layers-expanded .leaflet-control-layers-list { 352 | display: block; 353 | position: relative; 354 | } 355 | .leaflet-control-layers-expanded { 356 | padding: 6px 10px 6px 6px; 357 | color: #333; 358 | background: #fff; 359 | } 360 | .leaflet-control-layers-scrollbar { 361 | overflow-y: scroll; 362 | padding-right: 5px; 363 | } 364 | .leaflet-control-layers-selector { 365 | margin-top: 2px; 366 | position: relative; 367 | top: 1px; 368 | } 369 | .leaflet-control-layers label { 370 | display: block; 371 | } 372 | .leaflet-control-layers-separator { 373 | height: 0; 374 | border-top: 1px solid #ddd; 375 | margin: 5px -10px 5px -6px; 376 | } 377 | 378 | /* Default icon URLs */ 379 | .leaflet-default-icon-path { 380 | background-image: url(images/marker-icon.png); 381 | } 382 | 383 | 384 | /* attribution and scale controls */ 385 | 386 | .leaflet-container .leaflet-control-attribution { 387 | background: #fff; 388 | background: rgba(255, 255, 255, 0.7); 389 | margin: 0; 390 | } 391 | .leaflet-control-attribution, 392 | .leaflet-control-scale-line { 393 | padding: 0 5px; 394 | color: #333; 395 | } 396 | .leaflet-control-attribution a { 397 | text-decoration: none; 398 | } 399 | .leaflet-control-attribution a:hover { 400 | text-decoration: underline; 401 | } 402 | .leaflet-container .leaflet-control-attribution, 403 | .leaflet-container .leaflet-control-scale { 404 | font-size: 11px; 405 | } 406 | .leaflet-left .leaflet-control-scale { 407 | margin-left: 5px; 408 | } 409 | .leaflet-bottom .leaflet-control-scale { 410 | margin-bottom: 5px; 411 | } 412 | .leaflet-control-scale-line { 413 | border: 2px solid #777; 414 | border-top: none; 415 | line-height: 1.1; 416 | padding: 2px 5px 1px; 417 | font-size: 11px; 418 | white-space: nowrap; 419 | overflow: hidden; 420 | -moz-box-sizing: border-box; 421 | box-sizing: border-box; 422 | 423 | background: #fff; 424 | background: rgba(255, 255, 255, 0.5); 425 | } 426 | .leaflet-control-scale-line:not(:first-child) { 427 | border-top: 2px solid #777; 428 | border-bottom: none; 429 | margin-top: -2px; 430 | } 431 | .leaflet-control-scale-line:not(:first-child):not(:last-child) { 432 | border-bottom: 2px solid #777; 433 | } 434 | 435 | .leaflet-touch .leaflet-control-attribution, 436 | .leaflet-touch .leaflet-control-layers, 437 | .leaflet-touch .leaflet-bar { 438 | box-shadow: none; 439 | } 440 | .leaflet-touch .leaflet-control-layers, 441 | .leaflet-touch .leaflet-bar { 442 | border: 2px solid rgba(0,0,0,0.2); 443 | background-clip: padding-box; 444 | } 445 | 446 | 447 | /* popup */ 448 | 449 | .leaflet-popup { 450 | position: absolute; 451 | text-align: center; 452 | margin-bottom: 20px; 453 | } 454 | .leaflet-popup-content-wrapper { 455 | padding: 1px; 456 | text-align: left; 457 | border-radius: 12px; 458 | } 459 | .leaflet-popup-content { 460 | margin: 13px 19px; 461 | line-height: 1.4; 462 | } 463 | .leaflet-popup-content p { 464 | margin: 18px 0; 465 | } 466 | .leaflet-popup-tip-container { 467 | width: 40px; 468 | height: 20px; 469 | position: absolute; 470 | left: 50%; 471 | margin-left: -20px; 472 | overflow: hidden; 473 | pointer-events: none; 474 | } 475 | .leaflet-popup-tip { 476 | width: 17px; 477 | height: 17px; 478 | padding: 1px; 479 | 480 | margin: -10px auto 0; 481 | 482 | -webkit-transform: rotate(45deg); 483 | -moz-transform: rotate(45deg); 484 | -ms-transform: rotate(45deg); 485 | -o-transform: rotate(45deg); 486 | transform: rotate(45deg); 487 | } 488 | .leaflet-popup-content-wrapper, 489 | .leaflet-popup-tip { 490 | background: white; 491 | color: #333; 492 | box-shadow: 0 3px 14px rgba(0,0,0,0.4); 493 | } 494 | .leaflet-container a.leaflet-popup-close-button { 495 | position: absolute; 496 | top: 0; 497 | right: 0; 498 | padding: 4px 4px 0 0; 499 | border: none; 500 | text-align: center; 501 | width: 18px; 502 | height: 14px; 503 | font: 16px/14px Tahoma, Verdana, sans-serif; 504 | color: #c3c3c3; 505 | text-decoration: none; 506 | font-weight: bold; 507 | background: transparent; 508 | } 509 | .leaflet-container a.leaflet-popup-close-button:hover { 510 | color: #999; 511 | } 512 | .leaflet-popup-scrolled { 513 | overflow: auto; 514 | border-bottom: 1px solid #ddd; 515 | border-top: 1px solid #ddd; 516 | } 517 | 518 | .leaflet-oldie .leaflet-popup-content-wrapper { 519 | zoom: 1; 520 | } 521 | .leaflet-oldie .leaflet-popup-tip { 522 | width: 24px; 523 | margin: 0 auto; 524 | 525 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; 526 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); 527 | } 528 | .leaflet-oldie .leaflet-popup-tip-container { 529 | margin-top: -1px; 530 | } 531 | 532 | .leaflet-oldie .leaflet-control-zoom, 533 | .leaflet-oldie .leaflet-control-layers, 534 | .leaflet-oldie .leaflet-popup-content-wrapper, 535 | .leaflet-oldie .leaflet-popup-tip { 536 | border: 1px solid #999; 537 | } 538 | 539 | 540 | /* div icon */ 541 | 542 | .leaflet-div-icon { 543 | background: #fff; 544 | border: 1px solid #666; 545 | } 546 | 547 | 548 | /* Tooltip */ 549 | /* Base styles for the element that has a tooltip */ 550 | .leaflet-tooltip { 551 | position: absolute; 552 | padding: 6px; 553 | background-color: #fff; 554 | border: 1px solid #fff; 555 | border-radius: 3px; 556 | color: #222; 557 | white-space: nowrap; 558 | -webkit-user-select: none; 559 | -moz-user-select: none; 560 | -ms-user-select: none; 561 | user-select: none; 562 | pointer-events: none; 563 | box-shadow: 0 1px 3px rgba(0,0,0,0.4); 564 | } 565 | .leaflet-tooltip.leaflet-clickable { 566 | cursor: pointer; 567 | pointer-events: auto; 568 | } 569 | .leaflet-tooltip-top:before, 570 | .leaflet-tooltip-bottom:before, 571 | .leaflet-tooltip-left:before, 572 | .leaflet-tooltip-right:before { 573 | position: absolute; 574 | pointer-events: none; 575 | border: 6px solid transparent; 576 | background: transparent; 577 | content: ""; 578 | } 579 | 580 | /* Directions */ 581 | 582 | .leaflet-tooltip-bottom { 583 | margin-top: 6px; 584 | } 585 | .leaflet-tooltip-top { 586 | margin-top: -6px; 587 | } 588 | .leaflet-tooltip-bottom:before, 589 | .leaflet-tooltip-top:before { 590 | left: 50%; 591 | margin-left: -6px; 592 | } 593 | .leaflet-tooltip-top:before { 594 | bottom: 0; 595 | margin-bottom: -12px; 596 | border-top-color: #fff; 597 | } 598 | .leaflet-tooltip-bottom:before { 599 | top: 0; 600 | margin-top: -12px; 601 | margin-left: -6px; 602 | border-bottom-color: #fff; 603 | } 604 | .leaflet-tooltip-left { 605 | margin-left: -6px; 606 | } 607 | .leaflet-tooltip-right { 608 | margin-left: 6px; 609 | } 610 | .leaflet-tooltip-left:before, 611 | .leaflet-tooltip-right:before { 612 | top: 50%; 613 | margin-top: -6px; 614 | } 615 | .leaflet-tooltip-left:before { 616 | right: 0; 617 | margin-right: -12px; 618 | border-left-color: #fff; 619 | } 620 | .leaflet-tooltip-right:before { 621 | left: 0; 622 | margin-left: -12px; 623 | border-right-color: #fff; 624 | } 625 | --------------------------------------------------------------------------------