We are pleased to announce the first release candidate of the jQuery Geo plugin!
A lot has happened in the past year and a half, including silent releases of beta 3 (Oct 2015) and beta 3.2 (Jan 2016). These releases have concentrated mostly on performance and predictability. Let’s dive into what’s changed!
jQuery Geo on npm
You can get jQuery Geo via npm! The module is named jquery.geo.
In a terminal:
$ npm install jquery --save-dev $ npm install jquery.geo --save-dev
In an HTML file:
<div id="map" style="height: 480px;"></div> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery.geo/dist/jquery.geo.min.js"></script> <script> $(function() { $( "#map" ).geomap( ); }); </script>
jspm support
You can also now load jQuery Geo into your web app via jspm.io!
In a terminal:
$ npm install jspm --save-dev $ jspm init $ jspm install jquery $ jspm install npm:jquery.geo
In lib/main.js:
import $ from 'jquery'; import geomap from 'jquery.geo'; $( '#map' ).geomap( );
CloudFlare CDN
We still host copies of our old and current builds on our CloudFlare CDN: code.jquerygeo.com. To use the new builds, update your script tags to use the 1.0.0-rc1 release, for example:
<div id="map" style="height: 480px;"></div> <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="http://code.jquerygeo.com/jquery.geo-1.0.0-rc1.min.js"></script> <script>$(function() { $( "#map" ).geomap( ); });</script>
New Twitter handle @geomappin
To comply with the jQuery Foundation Trademark Policy, which states that we can’t have “jQuery” anywhere in a handle name, our Twitter handle is now @geomappin! The project name has not changed, neither has our website domain, nor our GitHub organization name.
OpenStreetMap by default
MapQuest recently changed their direct tile access policy to require developer registration. Because we don’t want to require users to sign up for a MapQuest plan in order to use the jQuery Geo plugin out of the box, we have decided to default to the base OpenStreetMap (OSM) tiles. The OSM tiles are coming from three subdomains for maximum load speed, and also work over SSL so you can use jQuery Geo on secured websites.
We have also retroactively edited the old beta builds hosted on code.jquerygeo.com in case you’re using those and don’t want to suddenly see missing tile images. Only the 1.0.0-b1.5 and higher have been updated, however, and we suggest you upgrade to rc1 anyway.
New website
You may have noticed that jquerygeo.com has changed quite a bit. We’ve updated the site to make it easier to find announcements and showcase websites. Our individual examples are still listed in the documentation. They are all in JS Bin, so you can easily play around with the source code to see what happens.
Related, the documentation is now in its own repo to get it out of the way of the actual code: https://github.com/jQueryGeo/docs
WordPress theme test
The new website shows that you can use jQuery Geo in WordPress themes by:
- downloading via npm
- adding a reference to functions.php, and
- putting some code in site.js
See this commit in particular if you’re interested.
jQuery 1.11 minimum
jQuery 1.11 is now the absolute minimum version of jQuery supported. That said, we strongly recommend using 2.2.4. At this time, jQuery 3 has not been tested but will be before our final 1.0 release.
Windows 10 tablet support
Microsoft introduced the Pointer Events API and is using it as the only means to support multitouch (“pinch zoom”) on tablets for both Edge and IE 11. It is now a W3C standard. It’s a decent API and jQuery Geo now implements it.
Thank you!
Thank you for trying jQuery Geo! The full changelog for this release follows. Please submit any issues to our GitHub repository: https://github.com/jQueryGeo/geo/issues.
Full changelog
- geomap – find returns empty array if user is interacting
- geographics – re-enable stencil filter for polygon holes
- geomap – allow force refresh for shingled services
- geomap – support pointer events for Microsoft Edge and IE11
- geomap – support multitouch for pointer events in Edge and IE11 on tablets
- geomap – don’t always refresh all shape services
- geomap – ignore developer refresh calls while user is interacting
- geomap – draw and measure modes now send click events as per docs
- geomap – find function returns shapes in reverse order
(so the first shape in the returned array will be from the outermost service) - project – move docs to separate repo
- geomap – fix bbox calculation on zoom and dragBox
- geomap – don’t clamp pixelSize when tilingScheme is null
- geomap – remove support for services’ getUrl
(it has been deprecated since beta 1) - geomap – treat null src in service as empty string/service
- geomap – support shinglesMax option
- geomap – support XHTML
- project – clamp mouse wheel delta to +/- 1
(also update jquery.mousewheel to 3.1.13) - geomap – allow zoom option when proj is null
- geomap – disable auto-cancelling of unloaded images
(side effect if cancelling all pending AJAX requests = bad) - project – support npm
- project – support jspm.io
- geomap – drawing shapes flickers when double buffered
( fixed for all but Gecko :/ ) - project – rename Twitter handle
- geomap – interacting when double buffered is jumpy
- geomap – switch to OSM tiles by default
Just want to say your article is as amazing. The clarity on your publish is just spectacular and that i can think you are a professional on this subject. Fine with your permission allow me to grasp your RSS feed to stay updated with forthcoming post. Thanks a million and please continue the gratifying work.|
Hi ryanttb….
A Question!
Can I draw a line with animation?
For example, moving from point A to point B with a tooltip to show the distance?
or fill the polygon background color from bottom to top with animation?
Hi sadra!
There are a couple built-in modes for measuring: measureLength and measureArea
http://docs.jquerygeo.com/geomap/mode.html (scroll down to the measure header).
You can change the template used to show text while measuring with the measureLabels option
http://docs.jquerygeo.com/geomap/measureLabels.html
You can change the style used while drawing with the drawStyle option: http://docs.jquerygeo.com/geomap/drawStyle.html
The drawStyle option will also affect temporary shapes created while using other modes. E.g., you can set the fill attribute of a style object to fill the polygon background color while in drawPolygon mode:
http://output.jsbin.com/zegix
I am just noticing that docs.jquerygeo.com does not seem to mention that fill and stroke are valid attributes in draw and shape styles. I will add that, thank you!
Since a lot is going on to make the line & fill movement as smooth as possible, it would be difficult to add custom animations that aren’t built in to the drawStyle option. That said, nothing’s impossible, just more work. You would have to create your own graphic server (an empty “singled” service) and manually draw on it with mouse movement.
Tanks ryanttb…
It is Ok (….. nothing’s impossible)…. just more work….
I think this feature is very Attractive!
More think about it.
Good louk.
most of your examples are broken because mapquest is not serving tiles.
All the hosted beta versions of the library have been switched to use OpenStreetMap instead of MapQuest. That should have fixed a lot of the examples. However, I just realized that some examples explicitly use MapQuest and must be fixed in the example itself. Thanks!
Just tried to start working with Jquery Geo. What I see in Chrome and Edge looks great. Unfortunately in Firefox it doesn’t (Windows 10 , FF 50.0.2). Tiles flowing everywhere, overflowing the container, not fitting together. This is the case on the jquerygeo.com website as well as in my project. Any fix for that?
Hi Markus,
We unfortunately still can’t reproduce this on Firefox in Windows 7 or 10 but have added an issue into GitHub to keep trying. https://github.com/jQueryGeo/geo/issues/226
We also plan to have a test page up that you can go to which might give us some more debug info.
Thanks for looking into this. If I can provide any more information, please let me know.
Hi Markus. I still cannot reproduce this on Firefox 50. I’ve created a page to spit out info that might help me. Please visit this link http://output.jsbin.com/zaviqom, wait three seconds for the info to change, take a screenshot and paste it as a comment to the GitHub issue: https://github.com/jQueryGeo/geo/issues/226 (you can drag the file into the comment box or paste it from your clipboard).
Thanks!