# Leaflet maps

**URL:** <https://forums.fusetools.com/t/leaflet-maps/6352>\
**Category:** How-to Discussions\
**Created:** [May 2, 2016, 3:40pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352 "2016-05-02T15:40:52Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 3:40pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/1 "2016-05-02T15:40:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [May 2, 2016, 3:46pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/2 "2016-05-02T15:46:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![petterroea](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/petterroea/32/438_2.png) [@petterroea](https://forums.fusetools.com/u/petterroea)\
**Post date:** [May 2, 2016, 3:51pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/3 "2016-05-02T15:51:35Z")

</div>

Since leaflet is a javascript api for the web, i would check out [WebView](https://www.fusetools.com/learn/fuse#keyword-webview). It might have the answer to your questions.

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 3:56pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/4 "2016-05-02T15:56:33Z")

</div>

**[Leafletjs](http://leafletjs.com/)** is an open source library to use **[OSM](http://www.openstreetmap.org/)** Open Street Maps.

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 3:58pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/5 "2016-05-02T15:58:46Z")

</div>

> **Liam Svanåsbakken Crouch wrote:**
> 
> Since leaflet is a javascript api for the web, i would check out [WebView](https://www.fusetools.com/learn/fuse#keyword-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?

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 4:21pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/6 "2016-05-02T16:21:17Z")

</div>

A little example, you can call it that way

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

```

```auto

<!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>

```

---

<div class="post-metadata">

**Author:** ![petterroea](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/petterroea/32/438_2.png) [@petterroea](https://forums.fusetools.com/u/petterroea)\
**Post date:** [May 2, 2016, 4:21pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/7 "2016-05-02T16:21:47Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 4:23pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/8 "2016-05-02T16:23:51Z")

</div>

> **Liam Svanåsbakken Crouch wrote:**
> 
> Yes! I would use a `DockPanel` in a configuration like this:
> 
> ```ux
> <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!

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 4:34pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/9 "2016-05-02T16:34:38Z")

</div>

How can I include this url within a WebView without errors

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

```

---

<div class="post-metadata">

**Author:** ![petterroea](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/petterroea/32/438_2.png) [@petterroea](https://forums.fusetools.com/u/petterroea)\
**Post date:** [May 2, 2016, 4:35pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/10 "2016-05-02T16:35:41Z")

</div>

What kind of errors are you getting?

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 4:38pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/11 "2016-05-02T16:38:28Z")

</div>

If I just put is ok

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

```

But when my url is

```auto
<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:

```auto
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

---

<div class="post-metadata">

**Author:** ![petterroea](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/petterroea/32/438_2.png) [@petterroea](https://forums.fusetools.com/u/petterroea)\
**Post date:** [May 2, 2016, 5:05pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/12 "2016-05-02T17:05:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 5:06pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/13 "2016-05-02T17:06:24Z")

</div>

> **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

---

<div class="post-metadata">

**Author:** ![petterroea](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/petterroea/32/438_2.png) [@petterroea](https://forums.fusetools.com/u/petterroea)\
**Post date:** [May 2, 2016, 5:11pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/14 "2016-05-02T17:11:15Z")

</div>

&, 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)`

---

<div class="post-metadata">

**Author:** ![manol](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@manol](https://forums.fusetools.com/u/manol)\
**Post date:** [May 2, 2016, 5:35pm UTC](https://forums.fusetools.com/t/leaflet-maps/6352/15 "2016-05-02T17:35:02Z")

</div>

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