Embedding a Google Map using Dojo

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Embedding a Google Map using Dojo

Harry Devine
I have been reading up on how to embed a Google Map into a page using the Google Javascript API.  I have signed up for an API key and received it.  I was searching online and found that you can't simply just include the Google Maps javascript as it loads other scripts along with it (https://www.speich.net/articles/en/2014/04/11/how-to-load-google-maps-with-dojo-and-amd/).  They suggested that you use a javascript module to load the Google Maps javascript, however I can't seem to get this to work.  Does anyone have any ideas on how to get this to happen?

I also looked at DojoX and it looks like that stuff has been deprecated, as well as the OpenLayers feature in DojoX doesn't seem to allow me to load the OpenLayers javascript library via a script tag, even though it works in the DojoX nightly tests pages.

Any ideas would be appreciated!
Harry

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

theinnkeeper

What we do is something like

 

 

if (!_mapAPIRequested) {

writeLog("Requesting Google Maps API");

 

dojo.io.script.get({

url : "http://maps.googleapis.com/maps/api/js",

content : {

libraries : "places, geocode",

sensor : "false",

callback : "_mapAPILoaded",

region:"US",

key: "mykeyvalue"

 

}

 

});

}

 --
Ricardo Diaz-Albertini




On Thu, 26 May 2016 18:17:34 +0000 (UTC), Harry Devine <[hidden email]> wrote:

I have been reading up on how to embed a Google Map into a page using the Google Javascript API.  I have signed up for an API key and received it.  I was searching online and found that you can't simply just include the Google Maps javascript as it loads other scripts along with it (https://www.speich.net/articles/en/2014/04/11/how-to-load-google-maps-with-dojo-and-amd/).  They suggested that you use a javascript module to load the Google Maps javascript, however I can't seem to get this to work.  Does anyone have any ideas on how to get this to happen?
 
I also looked at DojoX and it looks like that stuff has been deprecated, as well as the OpenLayers feature in DojoX doesn't seem to allow me to load the OpenLayers javascript library via a script tag, even though it works in the DojoX nightly tests pages.
 
Any ideas would be appreciated!
Harry



--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Harry Devine
In reply to this post by Harry Devine
Any ideas on this?  Everything I've read says "Use Openlayers" or "Use Google directly", but I can't seem to get either to work. I can't even get the Open Layers examples from the Dojo website to work for my  needs.  There must be a way to do this, so any insight would be appreciated.

Thanks,
Harry


From: "Harry Devine" <[hidden email]>
To: [hidden email]
Sent: Thursday, May 26, 2016 2:17:34 PM
Subject: [Dojo-interest] Embedding a Google Map using Dojo

I have been reading up on how to embed a Google Map into a page using the Google Javascript API.  I have signed up for an API key and received it.  I was searching online and found that you can't simply just include the Google Maps javascript as it loads other scripts along with it (https://www.speich.net/articles/en/2014/04/11/how-to-load-google-maps-with-dojo-and-amd/).  They suggested that you use a javascript module to load the Google Maps javascript, however I can't seem to get this to work.  Does anyone have any ideas on how to get this to happen?

I also looked at DojoX and it looks like that stuff has been deprecated, as well as the OpenLayers feature in DojoX doesn't seem to allow me to load the OpenLayers javascript library via a script tag, even though it works in the DojoX nightly tests pages.

Any ideas would be appreciated!
Harry

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Rob Gillan-2
Harry,

We’ve had success in the past using Leaflet.js inside both Dijit and Dojox Mobile, and there’s native support for OpenStreetMap data, and third party plug in for Google.  Haven’t used them in over a year but I’d suggest that’s a good path to investigate.

Cheers
Rob

On 15 Jun 2016, at 4:54 am, Harry Devine <[hidden email]> wrote:

Any ideas on this?  Everything I've read says "Use Openlayers" or "Use Google directly", but I can't seem to get either to work. I can't even get the Open Layers examples from the Dojo website to work for my  needs.  There must be a way to do this, so any insight would be appreciated.

Thanks,
Harry


From: "Harry Devine" <[hidden email]>
To: [hidden email]
Sent: Thursday, May 26, 2016 2:17:34 PM
Subject: [Dojo-interest] Embedding a Google Map using Dojo

I have been reading up on how to embed a Google Map into a page using the Google Javascript API.  I have signed up for an API key and received it.  I was searching online and found that you can't simply just include the Google Maps javascript as it loads other scripts along with it (https://www.speich.net/articles/en/2014/04/11/how-to-load-google-maps-with-dojo-and-amd/).  They suggested that you use a javascript module to load the Google Maps javascript, however I can't seem to get this to work.  Does anyone have any ideas on how to get this to happen?

I also looked at DojoX and it looks like that stuff has been deprecated, as well as the OpenLayers feature in DojoX doesn't seem to allow me to load the OpenLayers javascript library via a script tag, even though it works in the DojoX nightly tests pages.

Any ideas would be appreciated!
Harry

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Simon Walter
In reply to this post by Harry Devine
On 06/15/2016 03:54 AM, Harry Devine wrote:

> Any ideas on this?  Everything I've read says "Use Openlayers" or "Use
> Google directly", but I can't seem to get either to work. I can't even
> get the Open Layers examples from the Dojo website to work for my
>   needs.  There must be a way to do this, so any insight would be
> appreciated.
>
> Thanks,
> Harry
>
> ------------------------------------------------------------------------
> *From: *"Harry Devine" <[hidden email]>
> *To: *[hidden email]
> *Sent: *Thursday, May 26, 2016 2:17:34 PM
> *Subject: *[Dojo-interest] Embedding a Google Map using Dojo
>
> I have been reading up on how to embed a Google Map into a page using
> the Google Javascript API.  I have signed up for an API key and received
> it.  I was searching online and found that you can't simply just include
> the Google Maps javascript as it loads other scripts along with it
> (https://www.speich.net/articles/en/2014/04/11/how-to-load-google-maps-with-dojo-and-amd/).
>   They suggested that you use a javascript module to load the Google
> Maps javascript, however I can't seem to get this to work.  Does anyone
> have any ideas on how to get this to happen?
>

Hi Harry.

Yes, I think I am doing it that way.

I think you could do this without modules, but I wanted my code to be
modular (har har har). The example you've shown uses one module. Since I
am doing a lot with the Google Maps object, I wanted to keep that in
it's own module. So I have two.

First of all I created a module called loadgmap which is virtually
identical to the one you've shown in the URL:

define([], function ()
{
     var global = Function("return this")();
     var callback ="_googleApiLoadCallback";

     return {
         load: function (parameter, request, loadCallback)
         {
             if (!callback) return;
             global[callback] = function ()
             {
                 delete global[callback];
                 callback = null;
                 loadCallback();
             }
             require([parameter + "&callback=" + callback]);
         }
     };

});


Then I used that module in another module (mycoolgmap) that uses a map
object:

define(
     [
         "dojo/dom",
         "dojo/dom-construct",
         "dojo/query",
         "dojo/on",
         "dojo/json",
         "dojo/request/xhr",
         "dojo/dom-attr",
         "simon/loadgmap!https://maps.googleapis.com/maps/api/js?v=3",
         "dojo/domReady!"
     ],
     function(dom, construct, query, on, JSON, xhr, attr)
     {
         var map = null;
         var options = null;
         var parentNode = null;
         return {
             init: function(parentNodeName, optionList, markers, iconBase)
             {
                 options = optionList;
                 parentNode = dom.byId(parentNodeName);

                 // add the map to the parentNode
                 map = new google.maps.Map(parentNode, options.mapOptions);

                 // add the markers to the map
                 for (var i = 0; i < markers.length; i++)
                 {
                     var markerOptions = {
                         position: new
google.maps.LatLng(markers[i].lat, markers[i].lng)
                     };
                     var marker = new google.maps.Marker(markerOptions);

                     marker.setMap(map);
.....................

Then I use that module in my page:

<script>

     require([
         'dojo/dom',
         'simon/mycoolgmap',
         'dojo/domReady!'
     ], function (dom, mycoolgmap)
     {
         //...
         var map = mycoolgmap.init('map', options, mapMarkers);
         //...
     });

</script>

Does that make sense? Let me know how you go.

Cheers,

Simon
--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

adros
Here is another sample of AMD plugin module that can be used, with some
additional error handling and taking care of various states (API already
loaded / being loaded / not loaded)

define([
     "module",
     "dojo/aspect",
     "dojo/_base/lang",
     "dojo/request/script",
     "dojo/_base/config",
     "dojo/i18n!/nls/messages"
], function(module, aspect, lang, script, config, i18n) {

     var LOAD_TIMEOUT = 3000;
     return {
         load : function(id, require, callback) {

             //inspired by djeo-gmaps

             var t = setTimeout(function() {
                 //signal error via Dojo AMD micro events
                 var error = lang.mixin(new Error("amdPlugin"), {
                     src : module.id,
                     userMessage : i18n.msgGoogleMapsCouldNotBeLoaded
                 });
                 require.signal("error", error);
             }, LOAD_TIMEOUT);

             if (window.google && window.google.maps) {
// Google Maps API is already loaded
                 clearTimeout(t);
                 callback(window.google.maps);
             } else if (window._gmapsInitialized) {
                 // Google Maps API is being loaded
                 // wait till window._gmapsInitialized is called
                 aspect.after(window, "_gmapsInitialized", function() {
                     clearTimeout(t);
                     callback(window.google.maps);
                 });
             } else {
                 window._gmapsInitialized = function() {
                     clearTimeout(t);
                     callback(window.google.maps);
                 };
                 script.get("//maps.google.com/maps/api/js", {
                     query : {
                         sensor : false,
                         callback : "_gmapsInitialized",
                         client : config.googleApiClient
                     }
                 });
             }
         }
     };
});

Usage of plugin in another module:

define([
     "./googleMaps!"
], function(gm) {
     var geoCoder = new gm.Geocoder();
     ...


On 06/15/2016 02:33 AM, Simon Walter wrote:

> On 06/15/2016 03:54 AM, Harry Devine wrote:
>> Any ideas on this?  Everything I've read says "Use Openlayers" or "Use
>> Google directly", but I can't seem to get either to work. I can't even
>> get the Open Layers examples from the Dojo website to work for my
>>    needs.  There must be a way to do this, so any insight would be
>> appreciated.
>>
>> Thanks,
>> Harry
>>
>> ------------------------------------------------------------------------
>> *From: *"Harry Devine" <[hidden email]>
>> *To: *[hidden email]
>> *Sent: *Thursday, May 26, 2016 2:17:34 PM
>> *Subject: *[Dojo-interest] Embedding a Google Map using Dojo
>>
>> I have been reading up on how to embed a Google Map into a page using
>> the Google Javascript API.  I have signed up for an API key and received
>> it.  I was searching online and found that you can't simply just include
>> the Google Maps javascript as it loads other scripts along with it
>> (https://www.speich.net/articles/en/2014/04/11/how-to-load-google-maps-with-dojo-and-amd/).
>>    They suggested that you use a javascript module to load the Google
>> Maps javascript, however I can't seem to get this to work.  Does anyone
>> have any ideas on how to get this to happen?
>>
> Hi Harry.
>
> Yes, I think I am doing it that way.
>
> I think you could do this without modules, but I wanted my code to be
> modular (har har har). The example you've shown uses one module. Since I
> am doing a lot with the Google Maps object, I wanted to keep that in
> it's own module. So I have two.
>
> First of all I created a module called loadgmap which is virtually
> identical to the one you've shown in the URL:
>
> define([], function ()
> {
>       var global = Function("return this")();
>       var callback ="_googleApiLoadCallback";
>
>       return {
>           load: function (parameter, request, loadCallback)
>           {
>               if (!callback) return;
>               global[callback] = function ()
>               {
>                   delete global[callback];
>                   callback = null;
>                   loadCallback();
>               }
>               require([parameter + "&callback=" + callback]);
>           }
>       };
>
> });
>
>
> Then I used that module in another module (mycoolgmap) that uses a map
> object:
>
> define(
>       [
>           "dojo/dom",
>           "dojo/dom-construct",
>           "dojo/query",
>           "dojo/on",
>           "dojo/json",
>           "dojo/request/xhr",
>           "dojo/dom-attr",
>           "simon/loadgmap!https://maps.googleapis.com/maps/api/js?v=3",
>           "dojo/domReady!"
>       ],
>       function(dom, construct, query, on, JSON, xhr, attr)
>       {
>           var map = null;
>           var options = null;
>           var parentNode = null;
>           return {
>               init: function(parentNodeName, optionList, markers, iconBase)
>               {
>                   options = optionList;
>                   parentNode = dom.byId(parentNodeName);
>
>                   // add the map to the parentNode
>                   map = new google.maps.Map(parentNode, options.mapOptions);
>
>                   // add the markers to the map
>                   for (var i = 0; i < markers.length; i++)
>                   {
>                       var markerOptions = {
>                           position: new
> google.maps.LatLng(markers[i].lat, markers[i].lng)
>                       };
>                       var marker = new google.maps.Marker(markerOptions);
>
>                       marker.setMap(map);
> .....................
>
> Then I use that module in my page:
>
> <script>
>
>       require([
>           'dojo/dom',
>           'simon/mycoolgmap',
>           'dojo/domReady!'
>       ], function (dom, mycoolgmap)
>       {
>           //...
>           var map = mycoolgmap.init('map', options, mapMarkers);
>           //...
>       });
>
> </script>
>
> Does that make sense? Let me know how you go.
>
> Cheers,
>
> Simon

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Harry Devine
In reply to this post by Simon Walter
I tried what you suggested and nothing shows up.  No errors or anything in Firebug, but no map either.  Here's what I have:

gmapLoader.js:

define([], function() {

  var global = Function("return this")();
  var callback = "_googleApiLoadCallback";

    return {
    load: function(param, req, loadCallback) {
      if (!callback) {
        return;
      }
    global[callback] = function() {
    delete global[callback];
    callback=null;
    loadCallback();
    };
      require([param + "&callback=" + callback]);
    }
  };
});


In my main module where I'm trying to access it:


"dashboardFunctions/gmapLoader!https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyDMT6NgEmnzi9HuCKjnjO00-6tqZN4hIAU"

...


var map = null;
var options = null;
var parentNode = null;

return {

init: function(parentNodeName, optionList, markers, iconBase)

{
console.log("init: setting options and parentNode", optionList, " ", parentNodeName)
options = optionList;
parentNode = dom.byId(parentNodeName);

// add the map to the parentNode
console.log("init: setting Map object");
map = new google.maps.Map(parentNode, options.mapOptions);

// add markers to the map
console.log("init: setting map markers");
for (var i=0; i < markers.length; i++)
{
var markerOptions = {
position: new google.maps.LatLng(markers[i].lat, markers[i].lng)
};
var marker = new google.maps.Marker(markerOptions);
marker.setMap(map);
}
console.log("init: end of function");
},


Later in my module in a function where I want to show the map:

var mod=this;

var mapMarkers = {lat: -34.397, lng: 150.644};
var options = {zoom: 8};
var map = mod.init("SiteMap", options, mapMarkers);



Like I said, no errors but no map either.  Any thoughts?


Thanks,

Harry


From: "Simon Walter" <[hidden email]>
To: [hidden email]
Sent: Tuesday, June 14, 2016 8:33:01 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

On 06/15/2016 03:54 AM, Harry Devine wrote:

> Any ideas on this?  Everything I've read says "Use Openlayers" or "Use
> Google directly", but I can't seem to get either to work. I can't even
> get the Open Layers examples from the Dojo website to work for my
>   needs.  There must be a way to do this, so any insight would be
> appreciated.
>
> Thanks,
> Harry
>
> ------------------------------------------------------------------------
> *From: *"Harry Devine" <[hidden email]>
> *To: *[hidden email]
> *Sent: *Thursday, May 26, 2016 2:17:34 PM
> *Subject: *[Dojo-interest] Embedding a Google Map using Dojo
>
> I have been reading up on how to embed a Google Map into a page using
> the Google Javascript API.  I have signed up for an API key and received
> it.  I was searching online and found that you can't simply just include
> the Google Maps javascript as it loads other scripts along with it
> (https://www.speich.net/articles/en/2014/04/11/how-to-load-google-maps-with-dojo-and-amd/).
>   They suggested that you use a javascript module to load the Google
> Maps javascript, however I can't seem to get this to work.  Does anyone
> have any ideas on how to get this to happen?
>

Hi Harry.

Yes, I think I am doing it that way.

I think you could do this without modules, but I wanted my code to be
modular (har har har). The example you've shown uses one module. Since I
am doing a lot with the Google Maps object, I wanted to keep that in
it's own module. So I have two.

First of all I created a module called loadgmap which is virtually
identical to the one you've shown in the URL:

define([], function ()
{
     var global = Function("return this")();
     var callback ="_googleApiLoadCallback";

     return {
         load: function (parameter, request, loadCallback)
         {
             if (!callback) return;
             global[callback] = function ()
             {
                 delete global[callback];
                 callback = null;
                 loadCallback();
             }
             require([parameter + "&callback=" + callback]);
         }
     };

});


Then I used that module in another module (mycoolgmap) that uses a map
object:

define(
     [
         "dojo/dom",
         "dojo/dom-construct",
         "dojo/query",
         "dojo/on",
         "dojo/json",
         "dojo/request/xhr",
         "dojo/dom-attr",
         "simon/loadgmap!https://maps.googleapis.com/maps/api/js?v=3",
         "dojo/domReady!"
     ],
     function(dom, construct, query, on, JSON, xhr, attr)
     {
         var map = null;
         var options = null;
         var parentNode = null;
         return {
             init: function(parentNodeName, optionList, markers, iconBase)
             {
                 options = optionList;
                 parentNode = dom.byId(parentNodeName);

                 // add the map to the parentNode
                 map = new google.maps.Map(parentNode, options.mapOptions);

                 // add the markers to the map
                 for (var i = 0; i < markers.length; i++)
                 {
                     var markerOptions = {
                         position: new
google.maps.LatLng(markers[i].lat, markers[i].lng)
                     };
                     var marker = new google.maps.Marker(markerOptions);

                     marker.setMap(map);
.....................

Then I use that module in my page:

<script>

     require([
         'dojo/dom',
         'simon/mycoolgmap',
         'dojo/domReady!'
     ], function (dom, mycoolgmap)
     {
         //...
         var map = mycoolgmap.init('map', options, mapMarkers);
         //...
     });

</script>

Does that make sense? Let me know how you go.

Cheers,

Simon
--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Harry Devine
In reply to this post by Rob Gillan-2
Leaflet looks interesting.  I tried it but I can't get any map to show up, either using their example or via my code in my module. Here's what I did in my code:

1) downloaded their js file and put it in my /js folder
2) included it in my module via the dojo require
3) included the css file in my main php page
4) in my module handler where I want to show the map, I call the following:
    var myMap = leaflet.map("SiteMap", { center: [51.505, -0.09], zoom: 13 });

I get this as output:



Any ideas?  Perhaps including it as its own module isn't very "dojo-like" or "AMD-like"?
Harry


From: "Rob Gillan" <[hidden email]>
To: [hidden email]
Sent: Tuesday, June 14, 2016 8:11:48 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Harry,

We’ve had success in the past using Leaflet.js inside both Dijit and Dojox Mobile, and there’s native support for OpenStreetMap data, and third party plug in for Google.  Haven’t used them in over a year but I’d suggest that’s a good path to investigate.

Cheers
Rob


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Harry Devine
I was able to get this to work.  I was missing the tileLayer call which is needed to access the proper provider.  Looks really good.  When you did your implementation, did you have yours coded as a Dojo module?  I'm including leaflet.js as a dojo module and it works, but now I'm looking into some of the Leaflet plugins and they don't seem to lend themselves to being a Dojo module.

Thanks,
Harry


From: "Harry Devine" <[hidden email]>
To: [hidden email]
Sent: Wednesday, June 15, 2016 9:49:07 AM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Leaflet looks interesting.  I tried it but I can't get any map to show up, either using their example or via my code in my module. Here's what I did in my code:

1) downloaded their js file and put it in my /js folder
2) included it in my module via the dojo require
3) included the css file in my main php page
4) in my module handler where I want to show the map, I call the following:
    var myMap = leaflet.map("SiteMap", { center: [51.505, -0.09], zoom: 13 });

I get this as output:



Any ideas?  Perhaps including it as its own module isn't very "dojo-like" or "AMD-like"?
Harry


From: "Rob Gillan" <[hidden email]>
To: [hidden email]
Sent: Tuesday, June 14, 2016 8:11:48 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Harry,

We’ve had success in the past using Leaflet.js inside both Dijit and Dojox Mobile, and there’s native support for OpenStreetMap data, and third party plug in for Google.  Haven’t used them in over a year but I’d suggest that’s a good path to investigate.

Cheers
Rob


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Rob Gillan-2
Harry,

All we did was concatenate leaflet.js and it’s modules into a single js file and included it in the <head>.  Similarly we did the same for the leaflet css.  When we looked at them a couple of years ago it wasn’t that straightforward to modularise them all.  Leaflet is a really good mapping engine, well written and logical.  Expect you’ll have good success with it.

Cheers
Rob

On 16 Jun 2016, at 4:48 am, Harry Devine <[hidden email]> wrote:

I was able to get this to work.  I was missing the tileLayer call which is needed to access the proper provider.  Looks really good.  When you did your implementation, did you have yours coded as a Dojo module?  I'm including leaflet.js as a dojo module and it works, but now I'm looking into some of the Leaflet plugins and they don't seem to lend themselves to being a Dojo module.

Thanks,
Harry


From: "Harry Devine" <[hidden email]>
To: [hidden email]
Sent: Wednesday, June 15, 2016 9:49:07 AM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Leaflet looks interesting.  I tried it but I can't get any map to show up, either using their example or via my code in my module. Here's what I did in my code:

1) downloaded their js file and put it in my /js folder
2) included it in my module via the dojo require
3) included the css file in my main php page
4) in my module handler where I want to show the map, I call the following:
    var myMap = leaflet.map("SiteMap", { center: [51.505, -0.09], zoom: 13 });

I get this as output:


<5056826.025>

Any ideas?  Perhaps including it as its own module isn't very "dojo-like" or "AMD-like"?
Harry


From: "Rob Gillan" <[hidden email]>
To: [hidden email]
Sent: Tuesday, June 14, 2016 8:11:48 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Harry,

We’ve had success in the past using Leaflet.js inside both Dijit and Dojox Mobile, and there’s native support for OpenStreetMap data, and third party plug in for Google.  Haven’t used them in over a year but I’d suggest that’s a good path to investigate.

Cheers
Rob


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Harry Devine
Yeah it looks nice. I'm trying to figure out how to make it, along with some plugins, a Dojo/AMD module. I'm sure it can be done but I'm not that familiar. I've taken the Dojo 101 workshop already & I'm taking the Dojo 201 Dijit workshop now. I'm confident I can figure it out. 

Thanks!  I'm open to suggestions BTW. 😉
Harry

Sent from my iPhone

On Jun 15, 2016, at 6:17 PM, Rob Gillan <[hidden email]> wrote:

Harry,

All we did was concatenate leaflet.js and it’s modules into a single js file and included it in the <head>.  Similarly we did the same for the leaflet css.  When we looked at them a couple of years ago it wasn’t that straightforward to modularise them all.  Leaflet is a really good mapping engine, well written and logical.  Expect you’ll have good success with it.

Cheers
Rob

On 16 Jun 2016, at 4:48 am, Harry Devine <[hidden email]> wrote:

I was able to get this to work.  I was missing the tileLayer call which is needed to access the proper provider.  Looks really good.  When you did your implementation, did you have yours coded as a Dojo module?  I'm including leaflet.js as a dojo module and it works, but now I'm looking into some of the Leaflet plugins and they don't seem to lend themselves to being a Dojo module.

Thanks,
Harry


From: "Harry Devine" <[hidden email]>
To: [hidden email]
Sent: Wednesday, June 15, 2016 9:49:07 AM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Leaflet looks interesting.  I tried it but I can't get any map to show up, either using their example or via my code in my module. Here's what I did in my code:

1) downloaded their js file and put it in my /js folder
2) included it in my module via the dojo require
3) included the css file in my main php page
4) in my module handler where I want to show the map, I call the following:
    var myMap = leaflet.map("SiteMap", { center: [51.505, -0.09], zoom: 13 });

I get this as output:


<5056826.025>

Any ideas?  Perhaps including it as its own module isn't very "dojo-like" or "AMD-like"?
Harry


From: "Rob Gillan" <[hidden email]>
To: [hidden email]
Sent: Tuesday, June 14, 2016 8:11:48 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Harry,

We’ve had success in the past using Leaflet.js inside both Dijit and Dojox Mobile, and there’s native support for OpenStreetMap data, and third party plug in for Google.  Haven’t used them in over a year but I’d suggest that’s a good path to investigate.

Cheers
Rob


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Rob Gillan-2
In reply to this post by Rob Gillan-2
Harry,

We also got a lot of mileage with the great work done by the Mapzen folks, who offer a vector tile layer for Leaflet with a public API for vector tiles derived from OSM and others:


Cheers
Rob

On 16 Jun 2016, at 8:17 am, Rob Gillan <[hidden email]> wrote:

Harry,

All we did was concatenate leaflet.js and it’s modules into a single js file and included it in the <head>.  Similarly we did the same for the leaflet css.  When we looked at them a couple of years ago it wasn’t that straightforward to modularise them all.  Leaflet is a really good mapping engine, well written and logical.  Expect you’ll have good success with it.

Cheers
Rob

On 16 Jun 2016, at 4:48 am, Harry Devine <[hidden email]> wrote:

I was able to get this to work.  I was missing the tileLayer call which is needed to access the proper provider.  Looks really good.  When you did your implementation, did you have yours coded as a Dojo module?  I'm including leaflet.js as a dojo module and it works, but now I'm looking into some of the Leaflet plugins and they don't seem to lend themselves to being a Dojo module.

Thanks,
Harry


From: "Harry Devine" <[hidden email]>
To: [hidden email]
Sent: Wednesday, June 15, 2016 9:49:07 AM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Leaflet looks interesting.  I tried it but I can't get any map to show up, either using their example or via my code in my module. Here's what I did in my code:

1) downloaded their js file and put it in my /js folder
2) included it in my module via the dojo require
3) included the css file in my main php page
4) in my module handler where I want to show the map, I call the following:
    var myMap = leaflet.map("SiteMap", { center: [51.505, -0.09], zoom: 13 });

I get this as output:


<5056826.025>

Any ideas?  Perhaps including it as its own module isn't very "dojo-like" or "AMD-like"?
Harry


From: "Rob Gillan" <[hidden email]>
To: [hidden email]
Sent: Tuesday, June 14, 2016 8:11:48 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Harry,

We’ve had success in the past using Leaflet.js inside both Dijit and Dojox Mobile, and there’s native support for OpenStreetMap data, and third party plug in for Google.  Haven’t used them in over a year but I’d suggest that’s a good path to investigate.

Cheers
Rob


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Embedding a Google Map using Dojo

Harry Devine
Thanks Rob!  I'll take a look.  I was actually able to take the leaflet.js module, add-in the Sidebar plug-in into it, and have it working in my application.  Pretty neat.  Not a true Dojo module, but its AMD aware and works well.  I'd like to get the sidebar-v2 plug in working but that's for another time.

You suggestions and assistance has been GREATLY appreciated!
Harry


From: "Rob Gillan" <[hidden email]>
To: [hidden email]
Sent: Thursday, June 16, 2016 11:11:41 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Harry,

We also got a lot of mileage with the great work done by the Mapzen folks, who offer a vector tile layer for Leaflet with a public API for vector tiles derived from OSM and others:


Cheers
Rob

On 16 Jun 2016, at 8:17 am, Rob Gillan <[hidden email]> wrote:

Harry,

All we did was concatenate leaflet.js and it’s modules into a single js file and included it in the <head>.  Similarly we did the same for the leaflet css.  When we looked at them a couple of years ago it wasn’t that straightforward to modularise them all.  Leaflet is a really good mapping engine, well written and logical.  Expect you’ll have good success with it.

Cheers
Rob

On 16 Jun 2016, at 4:48 am, Harry Devine <[hidden email]> wrote:

I was able to get this to work.  I was missing the tileLayer call which is needed to access the proper provider.  Looks really good.  When you did your implementation, did you have yours coded as a Dojo module?  I'm including leaflet.js as a dojo module and it works, but now I'm looking into some of the Leaflet plugins and they don't seem to lend themselves to being a Dojo module.

Thanks,
Harry


From: "Harry Devine" <[hidden email]>
To: [hidden email]
Sent: Wednesday, June 15, 2016 9:49:07 AM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Leaflet looks interesting.  I tried it but I can't get any map to show up, either using their example or via my code in my module. Here's what I did in my code:

1) downloaded their js file and put it in my /js folder
2) included it in my module via the dojo require
3) included the css file in my main php page
4) in my module handler where I want to show the map, I call the following:
    var myMap = leaflet.map("SiteMap", { center: [51.505, -0.09], zoom: 13 });

I get this as output:


<5056826.025>

Any ideas?  Perhaps including it as its own module isn't very "dojo-like" or "AMD-like"?
Harry


From: "Rob Gillan" <[hidden email]>
To: [hidden email]
Sent: Tuesday, June 14, 2016 8:11:48 PM
Subject: Re: [Dojo-interest] Embedding a Google Map using Dojo

Harry,

We’ve had success in the past using Leaflet.js inside both Dijit and Dojox Mobile, and there’s native support for OpenStreetMap data, and third party plug in for Google.  Haven’t used them in over a year but I’d suggest that’s a good path to investigate.

Cheers
Rob


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest


--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Loading...