Leaflet maps

How-to Discussions
1

Hi Guys, any hint on how to implement leafletmaps instead of android/IOS native maps?

2

I have no idea what a “leafletmap” is – do you have any examples or reference implementation to link to? :slight_smile:

3

Since leaflet is a javascript api for the web, i would check out WebView. It might have the answer to your questions.

4

Leafletjs is an open source library to use OSM Open Street Maps.

5

Liam Svanåsbakken Crouch wrote:

Since leaflet is a javascript api for the web, i would check out WebView. It might have the answer to your questions.

Hi Liam, that was my first idea, is it possible to to use WebView within a panel so it doesn’t take full screen space, maybe just half?

6

A little example, you can call it that way

http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html?lat=39&lng=-0.3&zoom=14&message=me



<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css&quot; />
</head>
<body>
    <div id="mapid" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script&gt;
    <script>




        function $_GET(param) {
            var vars = {};
            window.location.href.replace( location.hash, '' ).replace( 
                /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
                function( m, key, value ) { // callback
                    vars[key] = value !== undefined ? value : '';
                }
            );

            if ( param ) {
                return vars[param] ? vars[param] : null;            }
            return vars;
        }

        var $_GET = $_GET(), 
            lat = $_GET['lat'], 
            lng = $_GET['lng'], 
            zoom = $_GET['zoom'], 
            message = $_GET['message'];


        var mymap = L.map('mapid').setView([lat, lng], zoom);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw&#39;, {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a&gt; contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a&gt;, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>&#39;,
            id: 'mapbox.streets'
        }).addTo(mymap);


        L.marker([lat, lng]).addTo(mymap)
            // .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
            .bindPopup(message).openPopup();

        // L.circle([51.508, -0.11], 500, {
        //     color: 'red',
        //     fillColor: '#f03',
        //     fillOpacity: 0.5
        // }).addTo(mymap).bindPopup("I am a circle.");

        // L.polygon([
        //     [51.509, -0.08],
        //     [51.503, -0.06],
        //     [51.51, -0.047]
        // ]).addTo(mymap).bindPopup("I am a polygon.");


        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);



    </script>
</body>
</html>
7

Yes! I would use a DockPanel in a configuration like this:

<DockPanel>
    <NativeViewHost Dock="Top">
      <WebView>
      </WebView>
    </NativeViewHost>
    <Panel Dock="Bottom" Height="50%" Color="#2196F3"/>
</DockPanel>

Note that you can also have the bottom panel be a fixed height, rather than a percentage of the viewport height, if that is desired.

8

Liam Svanåsbakken Crouch wrote:

Yes! I would use a DockPanel in a configuration like this:

<DockPanel>
    <NativeViewHost Dock="Top">
      <WebView>
      </WebView>
    </NativeViewHost>
    <Panel Dock="Bottom" Height="50%" Color="#2196F3"/>
</DockPanel>

Note that you can also have the bottom panel be a fixed height, rather than a percentage of the viewport height, if that is desired.

Falling in love with fusetools!

9

How can I include this url within a WebView without errors

<WebView Url="http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html?lat=39&lng=-0.3&zoom=14&message=me"&gt;
</WebView>
10

What kind of errors are you getting?

11

If I just put is ok

<WebView Url="http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html"&gt;
      </WebView>

But when my url is

<WebView Url="http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html?lat=39&lng=-0.3&zoom=14&message=me"&gt;
      </WebView>

I get:

MainView.ux(36): E0000: expected ';' (3B) but found '=' (3D)  Line 36, position 85.
MainView.ux(36): E8001: expected ';' (3B) but found '=' (3D)  Line 36, position 85.

Apparently is the “=” sign

12

Hmm, looks like some parsing issue. Have you tried using CDATA tags <![CDATA[stuff here]]> ?

13

Liam Svanåsbakken Crouch wrote:

Hmm, looks like some parsing issue. Have you tried using CDATA tags <![CDATA[stuff here]]> ?

I’ll try it, thanks

14

&, used in your URL, is an xml special character. Escaping it should do it:

[http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html?lat=39&amp;lng=-0.3&amp;zoom=14&amp;message=me](http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html?lat=39&amp;lng=-0.3&amp;zoom=14&amp;message=me)

15

Liam Svanåsbakken Crouch wrote:

&, used in your URL, is an xml special character. Escaping it should do it:

[http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html?lat=39&amp;lng=-0.3&amp;zoom=14&amp;message=me](http://s3-eu-west-1.amazonaws.com/mny-web/mapa.html?lat=39&amp;lng=-0.3&amp;zoom=14&amp;message=me)

Does the job, thanks.