Show the map inside of a specific container.

[salman-ghauri]

Hi,
I found the document very helpful. There is a little problem that I have encountered, I am unable to show the map inside a specific div like we do in the Mapbox.js in actual web apps:

<div id="map"></div>
var map = L.mapbox.map('map', 'mapbox.streets');

In the cordova plugin, there is just option to show the map generally not in a specific div. I am using tabs view and one of the tab contains the map container. here is the js:

$scope.onTabSelected = function () {

mapBox.show(
            {
                style: 'emerald', // light|dark|emerald|satellite|streets , default 'streets'
                margins: {
                    left: 0, // default 0
                    right: 0, // default 0
                    top: 316, // default 0
                    bottom: 50 // default 0
                },
                center: { // optional, without a default
                    lat: 52.3702160,
                    lng: 4.8951680
                },
                zoomLevel: 12, // 0 (the entire world) to 20, default 10
                showUserLocation: true, // your app will ask permission to the user, default false
                hideAttribution: false, // default false, Mapbox requires this default if you're on a free plan
                hideLogo: false, // default false, Mapbox requires this default if you're on a free plan
                hideCompass: false, // default false
                disableRotation: false, // default false
                disableScroll: false, // default false
                disableZoom: false, // default false
                disablePitch: false, // disable the two-finger perspective gesture, default false
                markers: [
                    {
                        lat: 52.3732160,
                        lng: 4.8941680,
                        title: 'Nice location',
                        subtitle: 'Really really nice location'
                    }
                ]
            },

            function(msg) {
                console.log("Success :) " + JSON.stringify(msg));
            },
            function(err) {
                alert("Error :( " + JSON.stringify(err));
            }
        );

}

Any help will be appreciated!!

[dagatsoin]

#29 do this, but only for iOS for now. I am currently converting it to Android, release in the two next weeks.

[JoellyR]

Hi, I am trying to use the solution from #29. I added the "div" element the show method... But it doesnt seem to change anything... I pulled using

cplugin add https://github.com/Telerik-Verified-Plugins/Mapbox --variable ACCESS_TOKEN=sk.eyJ1Ijoiam9lbGx5ciIsImEiOiJjaXY4aTl0NTAwMDk0MzBzOTUyanRzNmpjIn0.4tDzPE9VwqhxTI7iM3_3oA

Maybe that branch doesn't have #29 's changes?

here is the code i tried.

Mapbox.show({
          div: 'map_canvas',
          style: 'emerald', // light|dark|emerald|satellite|streets , default 'streets'
          margins: {
            left: 0, // default 0
            right: 0, // default 0
            top: 316, // default 0
            bottom: 50 // default 0
          },
          center: { // optional, without a default
            lat: 52.3702160,
            lng: 4.8951680
          },
          zoomLevel: 12, // 0 (the entire world) to 20, default 10
          showUserLocation: true, // your app will ask permission to the user, default false
          hideAttribution: false, // default false, Mapbox requires this default if you're on a free plan
          hideLogo: false, // default false, Mapbox requires this default if you're on a free plan
          hideCompass: false, // default false
          disableRotation: false, // default false
          disableScroll: false, // default false
          disableZoom: false, // default false
          disablePitch: false, // disable the two-finger perspective gesture, default false
          markers: [
            {
              lat: 52.3732160,
              lng: 4.8941680,
              title: 'Nice location',
              subtitle: 'Really really nice location'
            }
          ]
        },

        // optional success callback
        function(msg) {
          console.log("Success :) " + JSON.stringify(msg));
        },

        // optional error callback
        function(msg) {
          alert("Error :( " + JSON.stringify(msg));
        }
);

html

<section layout="row"  flex>
            <!-- Container #4 -->
            <md-card style="width:100%" flex>
                <md-card-content layout="column" layout-wrap class="no-padding" flex>
                    <div id='map_canvas' class="child-flexwrapper" flex="100"></div>
                </md-card-content>
            </md-card
</section>

[dagatsoin]

Do you develop for Android or iOS? I am supporting only Android for now.

[adolmajian]

Was anyone able to solve this? Binding the map to a container?

[yipcma]

I'm interested as well in binding the map to a container.

[janedzumerko]

@salman-ghauri Did you solve this issue? I have the same one now.

[cusspvz]

@dagatsoin is looking for iOS support.

If any of you guys has some spare time and iOS development skills, could you guys give us a hand?

[ansarikhurshid786]

I am also looking add map to specific id.