Please how can i integrate either google maps, or leaflet js api with framework7, i am building a real time mapping app of parents moving to a school location to pick their student, i have tried working on the google maps and leaflet js but it not working, can someone help with a tutorial or a link of how it can be integrated as i have googled and found no useful solution.
install leaflet from npm
HTML:
<div id="mapid"><div>
CSS:
#mapid{
display: block;
width: 100%;
height: 100%;
}
JS:
import L from "leaflet";
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
And dont forget import styles leaflet in CSS
Thanks for your answer but i did not use npm, instead i used a Hosted Version of Leaflet.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline'
'unsafe-eval' data: gap:">
<title>Parent NearBy</title>
<link rel="stylesheet" href="packages/core/css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/app.css">
<!-- <link rel="stylesheet" href="welcomescreen/f7.welcomescreen.css"> -->
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
<link rel="icon" href="img/f7-icon.png">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2y
uvEpDL9wQ=="crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512- gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJ
PuV0CPthew=="
crossorigin=""></script>
<!-- <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.0.11.min.js"></script>
-->
<!-- Include the PubNub Library -->
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.7.js"></script>
</head>
Do i have to us npm for it to work?
Nope, but use npm + webpack/gulp best way
How can i use it please?
Create a project using framework7-cli select webpack and transfer your source with a few edits
How do i get to do so?
import from node_modules/leaflet to your main css
will these be in the app.css or app.js file?
When i do an “npm start” i get this error
ERROR in ./src/js/app.js
Module not found: Error: Can't resolve 'leaflet' in 'C:\laragon\www\parentNearby2\src\js'
@ ./src/js/app.js 15:0-24 16:12-13You need install package first
npm install leaflet --save
Cool i have install the leaflet package.
So following your guideline
i added this to the appname/src/js/app.js
import L from “leaflet”;
var mymap = L.map(‘mapid’).setView([51.505, -0.09], 13);
I don’t know how to import the leaflet css, should i add it in the appname/src/js/app.js or appname/src/css/app.css
While i placed this code in appname/src/pages/catalog.f7.html for a test
<div id="mapid"><div>
#mapid{
display: block;
width: 100%;
height: 100%;
}
After following your instructions and running it on the console i get this error on the browser console, with a blank page.
Uncaught Error: Map container not found.
at NewClass.initContainer (leaflet-src.js:4114)
at NewClass.initialize (leaflet-src.js:3148)
at new NewClass (leaflet-src.js:300)
at Object.createMap [as map] (leaflet-src.js:4739)
at eval (app.js:30)
at Module…/src/js/app.js (app.js:4668)
at webpack_require (app.js:727)
at fn (app.js:101)
at eval (webpack:///multi(:8080/webpack)-dev-server/client?:3:18)
at Object.0 (app.js:4811)
Yep, because you need call leflet create function(L.map) on page catalog.f7.html
How do you do that because i have called it and i am getting errors.
<template>
<div class="page" data-name="catalog">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="title">Catalog</div>
</div>
</div>
<div class="page-content">
<div id="mapid"><div>
<style type="text/css">
#mapid{
display: block;
width: 100%;
height: 100%;
}
</style>
<div class="list links-list">
<ul>
{{#each products}}
<li><a href="/product/{{id}}/">{{title}}</a></li>
{{/each}}
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
products: this.$root.products,
};
}
};
leaflet create function(L.map);
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
</script>
The errors
catalog.f7.html:1 Uncaught Error: Module build failed (from ./node_modules/framework7-component-loader/lib/index.js):
SyntaxError: Unexpected token (9:10)
at Parser.pp$4.raise (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:2836:15)
at Parser.pp.unexpected (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:689:10)
at Parser.pp.semicolon (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:666:66)
at Parser.pp$1.parseExpressionStatement (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:1145:10)
at Parser.pp$1.parseStatement (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:880:26)
at Parser.pp$1.parseTopLevel (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:746:23)
at Parser.parse (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:553:17)
at Function.parse (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:576:37)
at Object.parse (C:\laragon\www\parentNearby2\node_modules\acorn\dist\acorn.js:4958:19)
at Object.loader (C:\laragon\www\parentNearby2\node_modules\framework7-component-loader\lib\index.js:190:21)
at eval (webpack:///./src/pages/catalog.f7.html?:1:7)
at Object…/src/pages/catalog.f7.html (http://localhost:8080/js/app.js:4727:1)
at webpack_require (http://localhost:8080/js/app.js:727:30)
at fn (http://localhost:8080/js/app.js:101:20)
at eval (webpack:///./src/js/routes.js?:5:80)
at Module…/src/js/routes.js (http://localhost:8080/js/app.js:4692:1)
at webpack_require (http://localhost:8080/js/app.js:727:30)
at fn (http://localhost:8080/js/app.js:101:20)
at eval (webpack:///./src/js/app.js?:11:68)
at Module…/src/js/app.js (http://localhost:8080/js/app.js:4668:1)
Learn F7… You code wrong, and you try get mapId conatainer when page not mounted and DOM tree not compilated
<script>
import L from "leaflet";
export default {
data: function () {
return {
products: this.$root.products,
};
},
on: {
pageMounted: function(e, page) {
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
}
}
};
</script>Ok i will learn F7 docs again although i cant find a comprehensive tutorial lecture for it, but please how can i
import from node_modules/leaflet to your main css
You need understand technological stack, learn SPA, bundlers(Webpack) , JS.
webpack and js ES6+ are common questions, there is no documentation in F7
I did this in the css @import '../../node_modules/leaflet/dist/leaflet.css';
And it displayed the map perfectly,
Thanks, but can i apply these principles to google maps and pubub apis?
Yep, these are basic concepts