Develop Reference

How to add custom marker in ar.js?

I am trying to change default hiro marker with my own marker. its black and white image in jpg format.
i generated pattern file using https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
this is code for marker
<a-marker
preset="pattern"
type="pattern"
url="https://cdn.glitch.global/8e98caee-09a2-4050-aa4b-53ddcebc0457/pattern-marker_uni.patt?v=1651161066156"
></a-marker>
you can check my code here https://glitch.com/edit/#!/oceanic-confirmed-allspice
What ever I tried , it is not triggering on this pattern. should I use nft image tracking vs marker tracking.

Google map with postal code and custom marker image

I'm currently using the Google Map's staticmap with a postal code and the standard red marker. I would like to use a custom png image instead of the red marker.
I've tried adding the url of the image with the marker parameter in the url but it gives an error in the map.
<img src="https://maps.googleapis.com/maps/api/staticmap?center=v302t8&zoom=9&size=460x150&maptype=roadmap&key=APIKEY&markers=color:red%7Cv302t8" alt="">
I'd like to be able to use this method as opposed to the geocoding method as they the number of queries is limited.

I don't know what the center location v302t8 ( source of the error? ) is or the final %7Cv302t8 in the map url so I modified the above as you can see below. The map loads OK and displays a custom marker image centred upon the "Tower of London"
The chosen image should be 64px x 64px or less.
https://maps.googleapis.com/maps/api/staticmap?center=51.507336, -0.074968&zoom=15&size=512x512&maptype=roadmap&key=<APIKEY>&markers=icon:http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/af/afeef641914e77b0950eb8b8317bfbf080b69ace_medium.jpg|51.507336, -0.074968
Update:
Using a png file also works - again bearing in mind the max dimensions of the marker image
https://maps.googleapis.com/maps/api/staticmap?center=51.507336, -0.074968&zoom=15&size=512x512&maptype=roadmap&key=<APIKEY>&markers=icon:https://cartoon.aminoapps.com/static/bower/emojify.js/images/emoji/skull.png|51.507336, -0.074968

Image map selection in svg

I am putting together an interactive for a biology project. I want to have the user click on a hyperlinked area of an image to link to more information. I am excited by SVGs because selections can be linked directly to the path without creating an image map overlay.
I used Illustrator to create the SVG and assigned a link to the path in the Attributes panel, but I was disappointed that the link is not active in the browser.
Here is that SVG: http://nspowers.org/bio/flower.html.
Next, I tried ImageMapster. I referenced the US map example (http://jsfiddle.net/juvyh/)
$('img').mapster({
mapKey: 'state'
});
to generate this:
<img src="http://nspowers.org/bio/flower.svg"
usemap="#usa" style="width:202px;height:151px;">
<map id="usa_image_map" name="usa">
<area href="#" state="stamen" full="Flower Identification" shape="poly" coords="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314 120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874 99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868">
here: http://jsfiddle.net/nspowers/juvyh/1971 using the Illustrator SVG code.
I do not understand why the selection area is different from the shading-on-hover.
I would appreciate learning the cause of this difference and if there is a better workflow to achieve paths that can be hyperlinked directly within the SVG that will display in the browser.

It appears that the fill="none" attribute on the polygon is what is suppressing the link.
If you change that to fill="rgba(0,0,0,0.0)" (fully transparent black) the link works fine.
Here is a jsfiddle: http://jsfiddle.net/FE9LD/
And here is a jsfiddle with some css to add in the highlight effect (may need latest chrome): http://jsfiddle.net/FE9LD/1/

If you set pointer-events="fill" it will use the fill area as a link no matter what the value of fill is.
<a xlink:href="http://nspowers.org/flower-desc.jpg" >
<polygon fill="none" pointer-events="fill" points="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314
120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874
99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868 "/>
</a>
Demo here

Using an IMG Map to display larger images

I am using an IMG Map that has many small pictures. When I hover over each image it will display a larger image. How do I do this? I do not mind using javascript, css, etc as long as it works. Please provide an example.
HTML OF IMG MAP
<img src="img.jpg" alt="Main Photo - Please View With Images On"
usemap="#Map" class="center" style="width:900px;" border="0" />
<map name="Map" id="Map">
<area class="1" shape="rect" coords="4,3,225,150" />
<area class="2" shape="rect" coords="2,152,221,303" />
<area class="3" shape="rect" coords="3,303,221,452" />
</map>
Each class would have a different image to display larger.

Here's a way to do it with ImageMapster:
http://jsfiddle.net/zSBL5/
To make this work with its built-in tooltip API you need to do a couple things. First add an attribute to each area like this:
<area data-key="2,all" shape="rect" coords="0,90,82,170"
href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />
Note data-key. This is ImageMapster's "mapKey". The only reason we need it for your situation is to create a single area group called "all" that can be used to show the same tooltip for each area. Each area will have an attribute like this but with a different number, e.g. data-key="3,all", data-key="4,all", and so on.
Then here's the code to bind imagemapster:
$('img').mapster({
toolTipContainer: $('#tooltip-container'),
mapKey: 'data-key',
areas: [ {
key: 'all',
toolTip: true
}],
showToolTip: true,
onShowToolTip: function(data) {
if (this.href && this.href!='#') {
data.toolTip.html('<img src="'+this.href+'">');
}
}});​
Here's what each option means:
1) toolTipContainer should contain the HTML for a template to show the tooltip. In the fiddle, you'll see I added a hidden div with ID "tooltip-container"
2) mapKey is the name of the attribute you added to each area. This attribute can contain one or more comma separated values. Imagemapster groups together areas for highlighting that share the first value, so use different ones if you don't need to group any areas. The 2nd value should be the same for each area, I use this to activate tooltips for all areas.
3) areas is an array of area-specific formatting information. Usually you use this to control how the highlighting effects on each area are shown. In your case I'm just using it to activate tooltips for all areas. The key all matches every area, since they all have that as then 2nd key, and toolTip: true enables tooltips. Normally you would say toolTip: "some text specific to this area:" and that text would just get shown in your default tooltip container. In your case, we want to show an image, and I want to grab the image URL from the area itself, so I need to handle it in a function when the tooltip is shown.
4) showToolTip says enable tooltips for the whole map.
5) onShowToolTip defines a function that gets called whenever a tooltip is shown. From here you can intercept it and change the contents to show the image from that area.
This should be simpler - but the tooltip API in imagemapster is really designed around a very simple model where you just have some hardcoded text for each area. This is a workaround to grab the URL from the the href of each area.

I think you want something like the below given fiddle. Code written is very rough & can be optimized. Just check you want this or something else.
Demo: http://jsfiddle.net/3GF6s/3/

How can apply 4 different tooltip onto a single image

Can someone help me that how can apply 4 different type of tooltips onto a single image?
When someone mouse over on image at top bottom left and right, at that time 4 different tooltip should be displayed.
Here, I have put example what I need. It's in Flash but I want without Flash.
http://www.lavasa.com/high/
If you have any idea regarding same please share with me.

I think you have three options.
Doing some work and displaying a tooltip 'manually', i.e. a floating div using javascript or something, there are probably a bunch of libraries for doing this.
Split your image into four, and provide a title (which will be displayed as a tooltiop of mouse is hovering) for each.
Do it old school with a <map>.
An example using <map>:
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area title="Save" shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area title="Furniture" shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area title="Plantations" shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
(Blatantly stolen from http://www.javascriptkit.com/howto/imagemap.shtml which was the first google hit, only added the 'title'-tag)

You could add 4 transparent images over your image and apply hover methods in them.

I think your looking for an imagemap with tooltips. Here is a quick example I can find, the demo you want to see is at the bottom of the page.
http://jquery.bassistance.de/tooltip/demo/

Well image map also struct me.
But these is another simpler method without having to write custom javascript. Just cut the image into 4 different parts and apply tooltip to each or simple <img alt="txt for north-west"/> will show some image tooltip.