Offsets on image marker added

[william57m]

My commit allows to give an offset for image marker.

I think it's something useful, because when you use image for marker, it is centered on the GPS coordinate and it's not always what we want, for example if you use a pin image you would like to point the arrow on the coordinate and it's wasn't possible without offset.

[tihomir-kit]

So this has not been merged yet? Last commit 9 months ago. :/

[bjornd]

Hi @pootzko. Do you own a Commercial or Developer license?

[tihomir-kit]

Hi,

I am currently in the development phase of a feature (this and the next week) so we do not own it at this very moment. But yes, we decided to go with jvectormap and we will get the Commercial license just before deployment to production the next week or the week after that one.

[bjornd]

@pootzko, do you need the "image markers offset" feature for your project?

[tihomir-kit]

Yes, because replacing the default marker with an image makes it move a bit towards bottom right. Would it be possible for you to merge this in perhaps?

[bjornd]

It will be done by the end of this week

[tihomir-kit]

Most awesome, thank you.

[bjornd]

I reviewed this pull request once again: it is badly designed, does not follow the principle of separation of concern and solves only one use-case - add offsets to all markers in series. Because of these reasons I can not merge it as is.

@pootzko can you please clarify on your problem and why do you need marker offset? What does it mean "makes it move a bit towards bottom right"? From the demos I have image markers are perfectly centered as well as regular circular markers. What browser do you use to reproduce this problem? Can I have some screenshots?

[william57m]

I did it quickly, maybe it's not the best place to do it.
I could give you a screenshot tonight to clarify the problem. But the problem is, for example imagine you have a pin (This one for example http://openclipart.org/image/250px/svg_to_png/169839/map_pin.png) the problem is that the image will be centered on the coordinate and the point of the pin won't point on the right coordinate, that's why an offset is useful.

[tihomir-kit]

Hi,

sorry, I am not at work today and tomorrow so unfortunately I can't get you any screenshots until Monday. Imagine if the coordinates for the default circle were at say 10,10. The circle is in the right place, everything is fine. Then say instead of the default circles you use a png icon that has a size of 16x16 pixels. It seems that the icons upper left corner is perhaps placed at the 10,10 - and where the icon actually points to is a bit to the right and down.

For example a circle is pointing to London, but the png icons point (like the one @william57m linked) is pointing somewhere at the sea between England and France. I hope that makes sense. I can prepare some screenshots for you on Monday if you think that would help clarify the issue.

[bjornd]

Pushed a better solution for this to develop 95b405f. You can apply offset to marker images when you use them as scale value or just a style attribute.

[tihomir-kit]

Hi,

could you please explain a bit more what you meant by "just a style attribute"? A style as in markerStyle, or as in style property on individual marker object from (array of items to be displayed)?

This is a simpler version of markers array that I have:

// something like this, a bit more complex with a few more properties, but that's it
var markers = [{
  name: "something 1",
  latLng: [10, 10],
  phone: "something 1",
  email: "something 1"
}, {
  name: "something 2",
  latLng: [15, 15],
  phone: "something 2",
  email: "something 2"
}]

And this would be my vectorMap setup:

    function initializeMap() {
      $("#world-map").vectorMap({
        map: "world_mill",
        backgroundColor: "white",
        regionStyle: {
          initial: {
            fill: "#ECECEC"
          },
          hover: {
            fill: "#D1D1D1"
          }
        },
        zoomButtons : false,
        zoomOnScroll: false,
        markers: markers,
        markerStyle: {
          initial: {
            image: "/images/marker-pin.png"
            // to me it would make sense for the offset prop to be here for example
          }
        },
        onMarkerTipShow: function(event, label, index){
          // do something
        }
      });
    }

Now, I looked at markers.html and I am not sure how to use the scale in my case or if it's even possible (I tried a few different combinations that did not work). You used it with values3 which is simply a mapping between values and scale image types and in my case I need to map a whole object to an image icon.

The other approach - style attribute, I'm not sure where to add it.. I tried adding it to every single marker from the markers array, tried adding it to markerStyle, to markerStyle.initial, to style (in the root of vectorMap object param), but it made no effect. Could you clarify this a bit please?

The lib was also not bundled so I had to run the build.sh, and I guess it worked well but I'm not 100% sure, because it complained about console.error. Could you perhaps also push the bundled version to dev as well?

Thank you.

P.S. - We just go the license 15-ish minutes ago.

[bjornd]

You can do it like this:

markerStyle: {
initial: {
image: {url: "/images/marker-pin.png", offset: [10, 10]}

}
}

On Mon, May 9, 2016 at 6:58 PM, Tihomir Kit notifications@github.com
wrote:

Hi,

could you please tell me what you mean by "just a style attribute"? A
style as in markerStyle, or as in style property on individual marker
object from (array of items to be displayed)?

This is a simpler version of markers array that I have:

// something like this, a bit more complex with a few more properties, but that's itvar markers = [{
name: "something 1",
latLng: [10, 10],
phone: "something 1",
email: "something 1"
}, {
name: "something 2",
latLng: [15, 15],
phone: "something 2",
email: "something 2"
}]

And this would be my vectorMap setup:

function initializeMap() {
  $("#world-map").vectorMap({
    map: "world_mill",
    backgroundColor: "white",
    regionStyle: {
      initial: {
        fill: "#ECECEC"
      },
      hover: {
        fill: "#D1D1D1"
      }
    },
    zoomButtons : false,
    zoomOnScroll: false,
    markers: markers,
    markerStyle: {
      initial: {
        image: "/images/marker-pin.png"
        // to me it would make sense for the offset prop to be here for example
      }
    },
    onMarkerTipShow: function(event, label, index){
      // do something
    }
  });
}

Now, I looked at markers.html
https://github.com/bjornd/jvectormap/blob/develop/tests/markers.html
and I am not sure how to use the scale in my case or if it's even possible
(I tried a few different combinations that did not work). You used it with
values3 which is simply a mapping between values and scale image types
and in my case I need to map a whole object to an image icon.

The other approach - style attribute, I'm not sure where to add it.. I
tried adding it to every single marker from the markers array, tried
adding it to markerStyle, to markerStyle.initial, to style (in the root of
vectorMap object param), but it made no effect. Could you clarify this a
bit please?

The lib was also not bundled so I had to run the build.sh, and I guess it
worked well but I'm not 100% sure, because it complained about
console.error. Could you perhaps also push the bundled version to dev as
well?

Thank you.

P.S. - We just go the license 15-ish minutes ago.

—
You are receiving this because you modified the open/close state.
Reply to this email directly or view it on GitHub
#328 (comment)

Best regards,
Kirill Lebedev

[tihomir-kit]

Works nicely, thanks.