Show the map inside of a specific container.

[telerik-verified-plugins]

Show the map inside of a specific container.

[adolmajian]

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

[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.

[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.