mapbox does not work in monaca.io project

Question

I simply added these lines to index.html inside head section:

<script src="https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css" rel="stylesheet" />

and these lines to style.css:

 body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

and these lines to page1.html inside the body section:

<div id="map_events"> </div>
<script>
        L.mapbox.accessToken = "pk.eyJ1Ijoic2FyaXl1eiIsImEiOiJ2OXNOZUl3In0.jUGJ37Gsx4aHML7aEd1TvA";
        var map = L.mapbox.map("map_events", "sariyuz.na1d3nml").setView([39, 32], 10);
</script>

There is only a blank page where instead of a map view. Could you help me?

Your app is a Cordova one..so have you whiteListed mapbox connections (using Whitelist plugin)? Have you added the content security policy meta tag in your html file? read the Cordova docs and especially the whitelist plugin. Do you get any errors during debug? — JcDenton86, Aug 31 '15 at 14:10
You are missing the content security policy meta tag. See my answer [here](http://stackoverflow.com/questions/30324899/ionic-no-internet-connection/30325189#30325189) which is similar but for Google maps. Check also the link in the answer. You have to set this meta tag according to your needs. In my project, I load leaflet library using Mapbox tiles and I have this meta tag on my HTML file: ``. If it helps you tell me to post it as an answer — JcDenton86, Sep 01 '15 at 12:01
I used this meta tag but it did not work. I think my problem is with the onsenUI. There must be a technic to use these mapbox example codes within a onsenUI page ( and ). — YellowFace, Sep 01 '15 at 23:16
Try and wrap your code inside the `ons.ready` function and not somewhere in the body. Also if you are using Angular make use of controllers to control your map. Read Onsen's UI docs to understand how it works. My project is made with Onsen and the mapbox map shows successfully. It's not a library issue but the approach you do. — JcDenton86, Sep 02 '15 at 05:44
Thank you Jc, i've read about ons.ready but i couldn't work it of my own. I don't want to use angular since i don't have time to learn it. I want to use plain javascript if it is possible. Could you send me a working sample of your projects code about mapbox? I want tou use it with multiple page (Onsen UI Sliding Menu Page.) — YellowFace, Sep 02 '15 at 20:00

JcDenton86 · Accepted Answer · 2015-09-03T17:23:00.593

2

Ok, see bellow. UPDATED based on the files you sent. Do the changes below only on the files mentioned here:

index.html:

<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
  <script>
    ons.bootstrap();
  </script>
 </head>
 <body>
  <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
  </ons-sliding-menu>
 </body>
 <script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
 <script src="js/app.js"></script>
</html>

menu.html:

<ons-page style="background-color: white">
<ons-list>
    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true});setPage(1)">
        <i class="fa fa-home fa-lg" style="color: #666"></i>
        &nbsp; Page 1
    </ons-list-item>
    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.slidingMenu.setMainPage('page2.html', {closeMenu: true});setPage(2)">
        <i class="fa fa-gear fa-lg" style="color: #666"></i>
        &nbsp; Page 2
    </ons-list-item>
</ons-list>
</ons-page>

Create a folder called js and inside create a file called app.js:

var map;    

function initMap(){
  map = L.map('map_canvas', {
    center: [37.779584,-122.416910],
    zoom: 10,
    zoomControl: false
  });
  L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2FyaXl1eiIsImEiOiJ2OXNOZUl3In0.jUGJ37Gsx4aHML7aEd1TvA', {
    attribution: '&copy; OpenStreetMap,  Imagery © Mapbox',
    maxZoom: 12,
    minZoom:7,
  }).addTo(map);  
}
var pageid = 1;
function setPage(currentpage){
   pageid = currentpage;
}

ons.ready(function() {
   app.slidingMenu.on('postclose', function() {
    console.log('postclose');
    switch (pageid){
    case 1:
        //This page does not contain the map
        break;
    case 2:
      initMap();
      break;
    }
  });
});

working codepen

edited Sep 03 '15 at 17:23

answered Sep 03 '15 at 06:18

JcDenton86

933
1
12
32

Thank you for your concern but i am sorry i could't work it. Especially i couldn't figure out where to replace ons.ready section. I tried several places to replace it but non of them worked. I am using monaca.io for IDE and i've created a fully working "onsenui sliding page" templated project. Then i've exported it for you. – YellowFace Sep 03 '15 at 15:09
https://drive.google.com/file/d/0B4f-8iqrvR4CYkZMQ1Vod0ktczg/view?usp=sharing Would you kindly implement this following mapbox example to these project files(index.html, menu.html, page1.html, page2.html and additional js libraries). https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-locatecontrol/ I also want initial page to be the page1.html with a map view autolocating users position at the startup of the app. – YellowFace Sep 03 '15 at 15:54
I edited my answer giving you a starting working point. To find the location you should use the [geolocation](https://www.npmjs.com/package/cordova-plugin-geolocation) plugin. – JcDenton86 Sep 03 '15 at 17:39
Thank you Jc, it worked like a charm. The only fix i did was this line: "" . This line causes "Refused to load the stylsheet 'https://api.mapbox.com/mapbox.js/v.2.2.2/mapbox.css' because it violates the following Content Security Policy directive: "style-src'self' 'unsafe-inline". error. – YellowFace Sep 05 '15 at 15:33
Js, i just want page1 is the initial page of the app. I want it automaticly open right after i run the app.. I've tried many things but i couldn't.. Would you take a look at it? – YellowFace Sep 05 '15 at 15:34
If it helped you then you can accept the answer or upvote it. Thanks – JcDenton86 Sep 05 '15 at 17:06
In the above example page1 is the initial page. If you want the map to appear on page1 then you should move the code from page2 to page1 and change the JavaScript accordingly on app.js and call initMap when pageid is 1 – JcDenton86 Sep 05 '15 at 17:40
Yes i did it already as you said, but page 1 does not not load map view until i tap to the page 1 from Sliding menu. It is also enough to open the sliding menu on and of to show up the mapview, without tapping the page 1 on the menu map shows up. – YellowFace Sep 05 '15 at 17:46
Thanks i will check it. By the way, sliding menu doesn't open when i swipe on the map view. – YellowFace Sep 05 '15 at 19:40
Actually i already tried to put initmap(); right after ons.ready. I tried again but unfortunately it didn't work in the emulator and the debugger. It only works in codepen. After trying it, even tapping to page1 from menu did not work. I couldn't get any mapview at all. Then i tried to add these two lines in the head section of index.html: – YellowFace Sep 05 '15 at 23:17
and After this process, it worked in the phone debugger but it did not work in emulator, even if i tap to page1 from menu.. Emulator is important for me to develop faster.. – YellowFace Sep 05 '15 at 23:22
There are 2 versions of monaca debugger mobile app. One is straight debugger other is (high performance debugger). It didn't work in straight one. It gives map container didn't find error. But it works fine and initial page is mapview in (high performance debugger). – YellowFace Sep 06 '15 at 07:53

score 0 · Answer 2 · answered Aug 30 '15 at 14:09

0

At least one thing that looks off here is that the ID you're supplying to L.mapbox.map is map_events, but the CSS rule for how to style the map is #map. Since you haven't included the HTML, I don't know which it is, but the three - html, javascript, and css - will need to match.

answered Aug 30 '15 at 14:09

tmcw

11,536
3
36
45

Thank you very much, i have fixed that css thing but it is the same problem. I think problem is with onsen.ui or monaca.. – YellowFace Aug 30 '15 at 22:04

mapbox does not work in monaca.io project

2 Answers2