etienne-martin / mapify Goto Github PK

@etienne-martin I need to investigate more, but wanted to get your input as well. As I understand it, on Android and iOS, if the map areas have href attributes, users need to tap twice in order to follow the links: once to focus the area, and then a second time to follow the link. At least that's what it seems like from some quick testing. Do you think it would be appropriate (and if so, possible?) to have an option in this library for eliminating the need for 2 taps? Something like "follow_links_on_first_tap" maybe?

This library already supports rect and poly areas, but doesn't support the last type: circle. Adding this support is not trivial, but not impossible. I could go ahead and give it a shot. However if any big changes are in the works, I might wait until things settle. @etienne-martin do you think it's appropriate to work on this feature now?

Searching on the web I found your script and I must say, it is a really nice job of yours. It works perfectly on firefox but I am having some odd behaviours while on google chrome. I tryed many things (looked into your code, changed jquery 'bind' to 'on') to make this works, but with no success.

Here a jsfiddle so you can see it yourself:
http://jsfiddle.net/j1dftnkp/5/

It should change background color when the mouse pointer is on the chest area. I don't know if I missed something.

Can you help me with that?

Hi
there was an useful issue for area always highlighted (#9) but what about showing text (for example
title of area) on it without hovering.

Any way to have multiple hoverClass: so it is possible to use many styles on the areas? I apologize for posting this here I really have no idea where it goes.

Mapify does exactly what to do. However, I want to load a 2nd image / map in a tab.
Upon loading, the default active content is mapified.

Switching to the 2nd tab - the image is not mapfied until one manually resizes the browser window. At that point the first tab's content is not mapified.

Example here: http://deepzoomchattanooga.com/platbook.php#
(Note: on the 2nd 'right' tab content, only area 12 is mapped).

Thank you.

Hello,

I am trying to simulate a hover on the clickable areas of the website so that the user knows what can be clicked.

I camed up with this function:

<script> var $blink = $(".mapify-polygon"); setInterval(function(){ $blink.toggleClass("mapify-hover"); }, 4000); </script>

It seems to work well and add the class as intended if I use it on the area but if I use it on the polygon (where the hover class needs to be activated) it doesn't work anymore.

How can this be achieved? Am I targeting the wrong class?

Also, is there any that I could simulate the hover effect only or certain areas or maybe set a delay to the blinking? Like... an area would highlight first, after 2 seconds the next and so on. 10s pause if there's no action on the website and then it starts again.

The website address is https://sporedev.ro/pleiade

Thank you!

Is there any option to hover over popup? I want place button on popup and when I try to click it popup diappears.

Hi,

Your plugin is great.

My problem which is small, is I am Zooming an image and I would like to destroy the mapify plugin, and return to normal img with original map, when zoomed out.

Example at: https://teampagosa.vacashon.com/vtour.php?id=142
Zoom In Floor Plan: creates the mapify image.
I use jquery .animate({width: "800px"}) on the image for the the Zoom In
Zoom Out Floor Plan:
I use jquery .animate({width: "150px"}) on the image for the the Zoom Out

Hover over beginning of blank line after paragraph "The spacious upper level ..."
Note: We have a pointer cursor because mapify is still applied to zoomed in image, even though it is zoomed out. The responsive nature of mapify is not scaling the mapify elements.

Any help would be appreciated.

Thanks

Hi!

I modified the script to highlight some areas after initialization.

I add class "emptySpace" to some areas. In jquery.mapify.js string 201 i add:

if ($(zone).hasClass("emptySpace")){
_this._drawHighlight($(zone));
};

Is this solution normal or are there better ways to implement it?

I'd like to have 2 different areas highlighted on the map.

1. Active - has green fill color
2. Booked - has grey fill color

See the live site - the active has been used, but it does not work. It seems that I cannot use active and another state on one map.

Click on the button "KORRUSE PLAAN" - it will open the map, where there's a "booked" area (apartment no 4) that is grey.
It should also show apartment no 49 active, but it won't because only one apartment can be highlighted.

Is there a solution?
Thanks!

Bonjour Étienne :) I was wondering if there's an easy way to leave the popOver on screen if the mouse hovers on it. I've been able to add URLs with data attributes but the popOver disappears as soon as the mouse leaves the related map area. No sweat if it's too involving (I don't know jQuery enough to tell), as it might be more than what you want the plugin to do. Thanks!

If click on hotspot, it will show tooltips instead of mouseover. Is there such a way for this?

Hi,

This plugin is working very well, but I have the following question: Can I change the class and then "reload" the area. For example:

I have the following data-hover-class in one area called "hover-red"
I changed the class to "hover-green" with the following:

$("#p3").click(function() {
	$(this).attr("data-hover-class","hover-green");
});

But doesn't change the colour of the area in real time.
¿It is possible to do this?

Thanks in advance!

Hi Etienne, thank you for your work. Works like a charm. Is it possible to have multiple areas highlighted when hovering a special area? Maybe it can be put together with a attribute or id.
Like

<area shape="poly" rel="foo" href="#" coords="...">
<area shape="poly" rel="foo" href="#" coords="...">
<area shape="poly"rel="foo" href="#" coords="...">

Cheers,
funktionaer

I have a feeling I'm doing something wrong, but for me the area coordinates are not working after resizing the window (or after refreshing the page after resizing the window). It seems to be behaving as if still using the original coordinates.

Here is my img:
<img usemap="#usa" width="794px" height="491px" typeof="foaf:Image" src="/map.jpg" alt="" />

And here is the map with on example area:
<map name="usa"><area title="LA" shape="poly" coords="482,394,481,392,481,389,477,386,478,380,478,380,477,380,470,380,451,381,450,380,451,373,453,368,457,361,457,360,457,360,458,357,457,356,457,354,455,351,455,346,446,346,431,346,413,346,413,354,414,362,414,365,416,368,417,372,420,376,420,379,421,380,420,386,418,390,419,392,419,394,419,400,417,403,418,405,421,404,428,404,436,407,441,408,444,407,447,408,449,409,450,407,448,406,445,406,443,404,448,404,449,404,452,404,452,406,452,408,457,408,458,409,457,410,457,411,457,413,464,415,467,414,468,412,470,412,472,410,472,411,473,413,472,414,472,415,475,413,477,411,477,411,475,410,476,409,476,408,477,408,478,407,479,407,486,412,486,413,489,413,490,413,491,411,491,410,491,410,488,408,483,407,481,405,481,404,483,404,484,403,482,402,482,402,485,402,486,399,486,398,485,395,484,395,482,398,481,399,479,399,478,398,480,396,481,394,482,394">

After loading the jquery.mapify.js and jquery.mapify.css, and doing $("img[usemap]").mapify(); I get no errors and see "mapified" in the console. But, when I resize the window, although the image shrinks with the browser, the coordinates are no longer correct.

Thank you for any advice!

I've tried to modify the following:

.mapify-po0ver{
height: 130px;

I tried changing the value, but upon mousover, the popover window size does not change

Hi,
I'm encoutering the following issue:
I've multiple images showing various data (ie one image per floor). Images and data are dynamically loaded, mapitf applied and then hidden.
Image ar shown on user request with a button.
The problem is that it seems that mapify does not apply when image are shown, unless browser window resized after image display.
Please refer to this JSFiddle for a 'demo.

Thx for your help.

also in example at http://etiennemartin.ca/mapify/

Salut Etienne , I want to know if it is possible to have different styles of popover. Any help on this would be great.

When using this in a Drupal environment, "$" is not available to the functions outside of the (function ($) {...}(jQuery)); block. Specifically the undefined error is coming from line 442 in jQuery.fn.scrollParent, var parent = $( this );

Not sure if it's the best way, but locally I fixed it for my purposes by moving the closing "}(jQuery));" to the end of the file so the entire plugin was enclosed.

I see that you can call mapfiy like $("img[usemap]:first").mapify({}), and like $("img[usemap]:last").mapify({}). My question is, is there a keyword for second or third, etc? I've never seen the use of "first" or "last" before

Is there an easy way to implement that the area stays highlighted if clicked (not only mouseover).
If an other area would be clicked then only the new should be highlighted.

is this possible?

Hey Etienne,
Can you help me to highlight all of the areas when the page load, and change the highlight color on hoover? Im experimenting with your solutions above without luck.

Originally posted by @thanstein in #9 (comment)

Hi,

I'm trying to implement Mapify with a svg floor plan that i have and want to depending on value from the database show if its rentable or not. The problem i'm having is that I want depending on if a room is rented out or available set a visible layer (like hover layer). For rented rooms i want it to be red and available rooms should be green. On hover i just want the visible layer to be the same as before and that tooltip is being shown.

Is this some that is possible to do?

Thanks in advance!

Is it possible to have an active area?
I'd like to highlight one part of the map. I'd add active class to area in html.

Hi, I'm excited with your lib but could you tell me is there any way to group elements to highlight?

For example I'd like to highlight all 3 top items if any of them is hovered. I mean the way they will become blue altogether

I will be grateful for any reply.

Hi,

I have a responsive image with width = 100% inside a Bootstrap column and I don't know how to get this plugin working, because as long as I understand, it requires a fixed width and height. How can I solve this problem? The image width should be dependent on the column width.

My code:

<div id="torso">
    <img src="../img/symptomenchecker/mf.png" id="torso-image" width="100%" usemap="#male-front-map">
    <map name="male-front-map" id="male-front-map">
        <area shape="poly" id="male-front-head-area" coords="854,269,866,272,898,205,897,165,885,160,867,178,877,119,867,73,833,31,791,10,755,0,712,2,668,20,625,55,610,97,608,138,618,181,599,160,588,161,585,186,592,222,611,271,627,270,629,297,650,324,682,360,706,380,739,389,769,384,813,347,848,311,853,292" >
        <area shape="poly" coords="849,310,844,409,910,444,981,476,1011,484,743,544,475,483,547,461,579,437,639,410,636,308,660,333,687,364,718,384,747,387,781,379">
    </map>
</div>

When I'm setting custom css for popover I have white popover arrow. My custom css was like:
background-color:rgba(0,255,245,0.5); or like in example background: #09f;

Currently, polygons initialize at the start and on mouseover, they are populated with coordinates.
Is there a way polygons to be initialised with points at load?

jquery.mapify.js line:28
Uncaught TypeError: a(...).siblings(...).andSelf is not a function

https://api.jquery.com/andSelf/

Note: This function has been deprecated and is now an alias for .addBack(), which should be used with jQuery 1.8 and later.

Hello,

I'm trying to make a dialog between the map and a table, such as an element that I click on the table, get activated on the map, does anyone know or have any notion of how to do this?
From what I researched here in GH, I used some of the things I said. Here's my code I'm trying to do now.

$("#tabela tbody tr th a").on("click",function(event){
event.preventDefault();
var destino = $(this).attr("href");
$("#Map area").eq(destino).focus().focus();
$(".mapify-svg polygon").eq(destino).css("fill","#09f");
});

In the project's web page, there are two elements with the class .pluginInfo, one in the header below the title, and one in the footer of the web page.

They look like this:

<p class="pluginInfo">Tested with Chrome, Firefox, Safari ( Desktop &amp; Mobile ), internet explorer 10 &amp; 11 using jQuery 1.8.1</p>

The closing parenthesis remains on the second line with nothing preceding it on that line. I think this is unaesthetic. (Please correct me if I am wrong.)

I suggest that you replace the code above with this:

<p class="pluginInfo">Tested with Chrome, Firefox, Safari (&nbsp;Desktop &amp; Mobile&nbsp;), internet explorer 10 &amp; 11 using jQuery 1.8.1</p>

In this way, the two .pluginInfo elements will look like this:

The screenshots were made using Chrome 61.0.3163.100 (official version on 64-bits) on Ubuntu 17.04 x64 with zoom level set to 100%.

just a quick question, so where do you get the data from?
for example:

<area data-nbmembre="1" alt="Saint-Louis" title="Saint-Louis" href="#" shape="poly" coords="92.394,40.738,
        218.265,178.666,228.589,153.08,225.747,144.878,241.33,128.802,210.934,99.067,211.084,95.177,214.824,86.499,215.273,79.616,
        220.809,70.04,194.924,60.165,196.72,53.881,172.331,48.494,173.229,44.903,150.637,40.738,147.195,52.534,133.878,39.068,
        137.32,28.445,122.657,13.483,92.394,40.738" />

is that a GPS coordinate?

When the popover is initiated, the popover gets opacity: 1 and opacity: 0 on mouseout but sometimes this results in the popover being above a hoverable element. So it's better to use display: none and display block for the .mapify-popOver element.

Hi,

I am unsure on how to get this to click through on mobile, please assist.

http://www.governmentsolarchecker.com/content/

Hello,

I am wondering how I would make certain area tags always highlighted.

For example...if a suite in an apartment building was sold...I would like to show it as always having a transparent red overlay. Is this possible?

Cheers,
Mike

Is there a way to "redraw" the entire map?

We are doing o long pooling and the area map list is continuously changing.

Thanks

For some use cases it wold be nice if there was an option to always show the area overlay (not only on hover).