First, I want to say thank you for this wonderful plugin.
My question is very simple, is it possible to recover the current scale of the map display or calculate it?
In advance thank you

attempts to convert default bbox from geodetic coordinates, don't do that if there is no proj

This feature will also fix #108 as the developer can set imgMax to 1 forcing all old shingled images to be removed as the new one is appended. For example:

services: [ {
  type: 'shingled',
  src: 'svc/getImage?bbox={{:bbox}}&w={{:width}}&h={{:height}}',
  shinglesMax: 1
} ]

Hi, there is a problem with $.geo.include when $.geo.proj = null.

I was trying to calculate bbox of multiple geometries.

Do you have any idea how to fix it?

Thanks a lot!

Hello,

I have a problem for loading the map when I use IE (9, I have not tested with other versions of IE, all (mozilla, chrome, opera, safari) other work properly), the map start loading but it does not load completely each time (sometimes it is fully charged, sometimes it is not fully charged), there are no errors written in the console, the status of the request is OK (200), this problem happens only with IE and a particular WMS service that I use, here is an example of code and WMS service that I use and who is problematic :

The HTML used : a div with the id "map"

The JavaScript used :

/*$(function () {

  $.geo.proj = null;

  var massGisHost = "http://geoserver.gis.irisnet.be/urbis/wms";
  var imageTemplate = "SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&SRS=EPSG%3A31370&BBOX={{=bbox}}&WIDTH={{=width}}&HEIGHT={{=height}}&LAYERS=urbisFR&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_xml&FORMAT=image%2Fpng&BGCOLOR=0xFEFFFF&TRANSPARENT=TRUE";


  var map = $("#map").geomap({
    services: [
      {
        id: "massgis_basemap",
        type: "shingled",
        src: massGisHost + "?" + imageTemplate,
        attr: "© 2012 Urbis"
      }
    ],

    bboxMax: [-23259.1191814215,-34777.6301956968,342646.800759207,302171.542461247],
    tilingScheme: null,
    center: [ 149520.547408725,169883.842008557 ],
    zoom: 11
  });

});  */

All answers, information or leads would be great, thank you in advance.

Hi, i read on docs that you use a "New default map", but a I cant undestand how to change it.
And, more important, i would undestand if I could develop my personal custom map engine/server. Basically I need to implement a custom map server with costum map and a complete client html/jquery.
My idea is to use jquery map for the client and dovelop what is needed for a server, could I?

If no, could you suggest an other jquery map engine server indipendet? I know only "mapbox" that isn't so advanced.

In Chrome 22, the up/down buttons on an <input type="number" /> are sticky when a map is present on the page. If you click up to increment the value, and don't move your mouse, the number increments indefinitely, as if the mouse-up event is getting captured by jquery geo.

Example here: http://jsfiddle.net/ismyrnow/LzPbC/

Ryan,
Love the plug-in!
I think there is an issue with one of the _wkt functions in jquery.geo.core.js.
Maybe I’m missing something, but multiLineStringParseUntagged(wkt) doesn’t really parse a multilinestring geometry correctly. I think the problem is partly because the existing code is looking for ")),((" as the separator to parse the wkt multilinestring into an array of parts, but the multilinestring format defined by the wkt standard specification delineates one part from the next with “), (“.

Given the below sample wkt, multiLineStringParseUntagged returns a single part with 34 coordinate pairs rather than two parts, one with 29 coordinate pairs and another with 5 coordinate parse. This result on the map is kind of ugly.

Example wkt:
MULTILINESTRING ((457416.7 4965392.8, 457415.4 4965249.6, 457415.3 4965234.1, 457417.0 4965105.9, 457417.4 4965069.6, 457417.3 4965059.6, 457405.4 4964931.7, 457385.5 4964800.3, 457381.0 4964760.5, 457388.1 4964719.3, 457403.1 4964686.3, 457432.0 4964658.9, 457475.6 4964635.0, 457534.8 4964606.7, 457667.2 4964510.5, 457694.1 4964483.2, 457711.1 4964452.4, 457713.6 4964421.0, 457699.9 4964345.5, 457676.3 4964265.5, 457664.6 4964242.9, 457637.8 4964206.6, 457616.0 4964186.0, 457607.4 4964162.9, 457601.6 4964143.3, 457597.6 4964121.0, 457596.8 4964098.9, 457600.8 4963884.8, 457599.5 4963787.0), (457405.4 4964931.7, 457423.075 4965009.539, 457429.5 4965089.1, 457429.6 4965109.2, 457432.2 4965392.9))

Thanks,
Ali

Hi. First, thanks for coding this amazing jquery plugin.

Background to my question: I have set up is a page with a jquerygeo map. I append LineStrings to the map in order to a draw a route a person has walked using the following jQuery code:

        //append red line
        $("#map").geomap( "append", {
            type: "LineString",
                coordinates: [
                    [lastLat, lastLong],
                    [lat, long]
                ],
        }, { strokeWidth: "5px" })

Where lastLat/lastLong are the second-to-last points the user visited on his trip and lat/long are the last points the user visited.

When a user places his mouse over some text on the page describing the point location, a marker with an icon of a flag comes up on the map on the location, using the following jQuery code:

var marker = $("#marker").geomap( "option", "shapeStyle", { width: 0, height: 0 } );
marker.geomap( "append", {
        type: "Point",
            coordinates: [ GPSlocation1, GPSlocation2 ]
}, "" );

I also have created the following CSS code to work with the above jQuery code:

  #marker .geo-label {
  width: 21px;
  height: 43px;
  margin-left: -10px;
  margin-top: -42px;
  background-image: url('../images/marker.png');
  }

The problem: while it works as expected, the lines drawing out the users path seem to overlay the point marker, instead of vice-versa. In other words, it seems like the lines have a higher z-index than the point marker. I've been trying to figure out how to make the point marker come up on top with no success. Since jquerygeo has no CSS file, there's doesn't seem to be any way for me to edit the z-index of the LineString to lower the z-index. Any guidance extremely appreciated.

There's a problem turning up on touchscreen devices where after tapping on the map, you would be unable to interact with the rest of the page. This has been tested on iOS devices. Is anyone aware of this?

Update: Here's a video: http://ge.tt/8D8w5oG/v/0

1. add a markers(css) service to all-tiled.html.
2. draw a shape, say a circle
3. move the map
4. sometimes the shape position is not correct

Any idea? Thanks.

Hi,

I am a javascript/jquery beginner so please excuse me if I've missed something basic.

It doesn't seem possible to have maps with different projections on the same page. I suspect this is because geo.proj is in the global namespace and only one instance can exist for all geomap widgets on the page. Is that correct or is there a way to do this?

Thanks,
Wayne

Add the ability to fire events (like bboxchange) and have the map control call the handlers that are listening to that event.

For example, if we setup a bboxchange handler for the map, and then programatically set the zoom level, we should be able to call map.geomap("fire", "bboxchange"), which fires the bboxchange event and calls the handler we set up.

Hi again!

So I'm using jQueryGeo to show a user's path that he has driven. I append points and linestrings to the map to show the user's path. What I would like to do is make the map have the correct amount of zoom based on the distance of the user's path. For example, if the path is across the United States, the map will have to be zoomed out a lot more (so you can see the entire path) than if the user's path was to the supermarket down the street (in which case the map would have to be zoomed in a lot more).

Do you have any advice on how to do something like this? How many kilometers exactly is each zoom level? Maybe I can write some jQuery to determine the distance between the start and end points of the path and, if the total distance falls within the kilometer range of a certain zoom level, choose that map zoom level. But I would have to know the kilometer distance for each zoom level.

Hi,

is it possible to put the Panning and Zooming of mapquest into the map?

Many thanks
Andy

Failed to load resource: the server responded with a status of 404 (Not Found) http://otile2.mqcdn.com/tiles/1.0.0/osm/0/0/1.png

Failed to load resource: the server responded with a status of 404 (Not Found) http://otile2.mqcdn.com/tiles/1.0.0/osm/0/1/0.png

The above is only coming when few parts of the map is zoomed in or out

At least in certain conditions document.elementFromPoint may return null, which prevents panning the map. This problem exists at least in v1.0.0-b1.5, but didn't exist in v1.0b1.1.

Hi, it seems to be an issue removing shapes. Here is simulation: http://jsbin.com/asinub/6/edit When you append a then remove existing object it works great. But when you append object created by a function a you try to remove it, object remains in map.

I don't know if this is an issue or design.

Thanks.

When calling map.geomap("option", "bbox"), the array that is returned is a reference to the array inside of the geomap module. It should be a copy, to prevent editing outside of the get/set methods.

For example:

var bbox1 = map.geomap("option", "bbox");  // [0,1,2,3]
bbox = [4,5,6,7];
var newBbox = map.geomap("option", "bbox"); // [4,5,6,7]

Is there an API for overlaying or appending images to a jQuery Geo map?

Basically the zoom either goes full in or full out. It's just too sensitive to the touch pad for some reason. This does not happen with Leaflet or GMaps, so it's not a sensitivity issue.

Tested on late-2013 MBP with OSX 10.9.1 using Google Chrome 32.0.1700.107.

thanks for great job,
we draw a line and save it to database and then we need to change this line is there any way to edit support to line, polyline or point ?.

thanks.

Handy for turning the current map bbox into a geometry for feature selection.

Hi,
may i know whether this plugin can be used to display medical images for ex pyramidal tiff images besides maps ?

CSS3 allows a range of new cursor styles, and in particular I want to show the standard 'hand' cursor when the user is just moving the mouse around, and switch to the 'grabbing hand' cursor when the map is being panned.

I tried adding the following code:

cursors: {
  static: "move",
  pan: "-webkit-grabbing, -moz-grabbing"
},

but that just gave me a default 'arrow head' cursor.

Adding this instead

cursors: {
  static: "move",
  pan: "-webkit-grabbing"
},

gives me the grabbing hand in Safari and Chrome (which is better than nothing I guess) but it shows that cursor all the time, not just when the map is being panned around. I expected the 'static' cursor to show when the map is not moving but I suppose that will only show when the map is set to 'static' mode.

Please enhance the cursors options to allow for more, and cross browser, cursor options.

Also I'd like the cursor to change when the user mouses over one of the appended map pins. I've tried adding cursor: "pointer"; to the various bits of CSS that get triggered but it seems to be overridden by the Geo code. Any suggestions for this?

Cheers

Dave

Inertial panning was removed to improve and test mobile experiences and will need to be re-added.

And can it also show images that are not of an earth but rather human cellular images?
If so, a pointer to the API calls would be great.

Heya,

I downloaded this plugin and attempted to use it, but all tiles come back as failures.

http://otile2.mqcdn.com/tiles/1.0.0/osm/0/1/0.png << unable to serve request.

On a map using a single, shingled service with $.geo.proj = null, measurement text draws at the left-top of the map and drifts away.

As you can see here - http://194.228.3.81/testing/new-ajax/ - images of shingled services are appended in DIV geo-services-container.

It can be seen nicely on labels when on pan.

Is there any way to avoid appending images?

Hi Ryan, first up, great work with this project, it's really good and beautifully put together.

I am working on a small project with the following requirements:

1. Instead of using OSM or another existing map service, I have a hand-painted map (very large - some 18MB) that I wish to tile, and serve up to a web interface. I've had a quick look though the Services documentation but I'm not fully clear on how to approach this. I've written a script to split the image into tiles, but was wondering if there is any documentation on the best way to name and sort those tiles such that I can use them via your code.
2. I don't want the user to be able to pan outside of the bounds of the hand-painted map area. Is it possible to set specific max/min lat/lon info?

Cheers

Dave

$.geo.include should take a bbox and either a coordinate or second bbox as arguments. It would return the bbox that encompasses both arguments. If the first argument is falsy, it should return the second argument as the bbox.

"if you move the map, the zoom level is restored to maximum zoom level" /via @nuky89

markers don't keep up with the map in chrome, but works with IE9 http://bl.ocks.org/3150747

It seems like overlays appended to a jQuery Geo map have to be redrawn on pan. The behavior that I am describing can be observed in this demo:

http://jquerygeo.com/1.0b1/examples/logo.html

Is there anyway to avoid redrawing an appended overlay on pan/zoom?

Hello,

I was trying to use the widget with an xhtml document but kept running into a syntax error in jquery.
Tracking down the error, I finally used the 'simplest' example
http://docs.jquerygeo.com/examples/simplest.html

and transformed it into xhtml by declaring it xhtml and closing tags in the header:
http://plaza-omega.codio.io/jquerygeo/simplestmap/simplest.xhtml

This results in this syntax error:
[16:57:26.562] SyntaxError: An invalid or illegal string was specified @ http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js:4

The same result with jquery 2.1.3:
http://plaza-omega.codio.io/jquerygeo/simplestmap/simplest_jq213.xhtml

Is xhtml supported ?

I want to add nicely styled tooltips, done using jQuery UI's excellent Tooltip system, to the items I've positioned on the map but the appended items don't respond to any sort of mouseover events.

My very simplified tooltip code looks like this:

$(document).tooltip({
  items: 'a.map-item',
  content: function() {
    var layout = '<div class="tt-thumbnail" style="background-image:url(images/photos/background_2_475x260.jpg);"></div>'
    return layout + "Some text here extracted from the placed item's properties.";
  }
});

Assuming there is some way to get this to work, my next issue is that I need to access the appended item's properties, but I'm happy to burn that bridge when I get to it.

Do you have any examples of adding mouseover events to appended items, or any other ideas as to how I can add styled tooltips to my map items?

Cheers

Dave

Can we draw a marker in the small navigation map besides main view map?
Does geo supports customizable markers?
Does geo supports text,image and label overlays?

It seems that my apple laptop somehow accelerates the scrolling when I try to zoom the maps. Google maps are really easy to zoom. I guess they somehow take into account the accelerated scrolling, but with jquery geo zooming is difficult because it dives in way too quickly when I try to zoom in, and then jumps immediately out to zoom level 0 when I try to zoom out just a little.

Is there a way to allow the user to pan, but stop panning past the edges of the map so there's no white space around the map within the container? This assumes I'd have zoom set appropriately so the map was as large or larger than the container.

how to view custom image(one image) in my website?

New at using this.

I did this:

$(function () {
  // create a map that replaces the default service with
  // one using a string for the src property instead of a function
  var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8,
    services: [ {
      id: "osm-string-src",
      type: "shingled",
      src: "myblahblahimage.png"
    } ]
  });
});  

However, the image is stretched, and the zoom function works briefly but does not stay zoomed.

1. How do I get the image to render correctly without stretching- do I set the image with a height and width in an inline map style?
2. How do I get the zoom to stay?

Thanks in advance for your help.

There seem to be some issues displaying multipolygons. The label is not visible and the polygons are only visible at certain positions/zoom levels. Test case available at http://www.helsinki.fi/~ermaijal/multipolygon/maptest.html. Initially the polygons are displayed, but if you zoom in or pan the map so that North America is on the bottom, they disappear. Tested with v1.0.0-b1.5 on Firefox and Safari (Mac).

Interactive zoom (with mouse scroll wheel) fails to pick the correct zoom level when using a tiling scheme with inconsistent zoom factors between levels.

See http://jsfiddle.net/ismyrnow/R8BSj/ :

• When zooming in from 0 to 1, interactive zoom jumps to 2, but explicit zoom works fine.
• When zooming in from 11 to 12, interactive zoom also won't zoom, but explicit zoom works fine.

Hello,

Hope this finds you well. I am amazed and very impressed by this script and had a quick question.

It looks like all the examples on your page are using the Mapquest open tile set. I envisage a much leaner interface for my project, and was in fact hoping to use a simple 'political' map which just shows national boundaries. In addition to this, I would like the map to still display the cities (and your awesome label placement algo), some features (e.g. rivers, lakes) but no roads, etc.

Is it therefore possible to overlay all these 'layers' (cities, lakes, roads, etc.) on top of a custom built SVG map? Please let me know if there is a way to achieve this and many thanks for your time!

Kind regards,
G BdeJ

Should return center coordinate and radius as well as a circular polygon.

Latest mouse wheel plugin is 3.0.6 jQuery 1.7 compatiblity added with 3.0.5 It looks like 3.0.2 is the one being embedded. It doesn't work at all form me on Firefox loading jQuery 1.7.1

It seems that a floating point precision issue in bounding box calculation (fromGeodetic and then toGeodetic in bbox function) preventing a polygon with longitude -180.0 from being displayed. Here is an example append call that doesn't work:

map.geomap("append", { type: "Polygon", coordinates: [[[-180.0,51.7949888],[-179.9999997,52.138489],[-179.8836979,51.9764894],[-180.0,51.7949888]]] }, "test");

If -180.0 is changed to -179.999999, it works.

Tested with version 1.0.0-b1.5.

Geometry object has coordinates property but no bbox property.

When adding vector objects with "append", passing null instead of a boolean to the "refresh" causes the styling argument to be ignored.