Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| imagemapping:start [2023/03/25 10:03] – kthoene | imagemapping:start [2023/04/05 20:34] (aktuell) – kthoene | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| ====== Image Map Plugin With Marker ====== | ====== Image Map Plugin With Marker ====== | ||
| - | ====== Map with Internal Marker ====== | + | ===== About ===== |
| - | {{map> | + | **Documentation and Code**: [[https://github.com/kgitthoene/dokuwiki-plugin-imapmarkers|github.com/kgitthoene/dokuwiki-plugin-imapmarkers]]. |
| - | [[https://en.wikipedia.org/wiki/Asia|CON1 Asia @ 434, | + | |
| - | [[https:// | + | |
| - | [[https:// | + | |
| - | [[https:// | + | |
| - | [[https:// | + | |
| - | [[https:// | + | |
| - | [[https:// | + | |
| - | {{<map}} | + | |
| - | <wrap imaploc #CON1>Asia</wrap> | + | ====== Map with Internal Marker ====== |
| - | <wrap imaploc #CON2>Africa</wrap> | + | |
| - | <wrap imaploc #CON3>North America</wrap> | + | {{imapmarkers>imagemapping: |
| - | <wrap imaploc #CON4>South America</wrap> | + | [[https:// |
| - | <wrap imaploc #CON5>Antarctica</wrap> | + | [[https:// |
| - | <wrap imaploc #CON6>Europe</wrap> | | + | [[https:// |
| - | <wrap imaploc #CON7>Australia</wrap> | | + | [[https:// |
| - | <wrap hi> | + | [[https:// |
| - | <wrap imapcfg #CON1> | + | [[https:// |
| + | [[wp>Australia|CON7|Australia | ||
| + | [[wp>Australia|Australia II @ 510, | ||
| + | [[|Australia III @ 510, | ||
| + | {{cfg>}} | ||
| { | { | ||
| " | " | ||
| - | "clicked_reference_css": { " | + | "clicked-reference-css": { " |
| + | " | ||
| + | " | ||
| } | } | ||
| - | </wrap> | + | {{<cfg}} |
| + | {{< | ||
| - | ====== Map with Media-Link Marker ====== | + | {{imapmloc> |
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | <wrap hi> | ||
| - | {{map>imagemapping: | + | ++ Continents |\\ {{imapmloc>CON1|Asia}}\\ {{imapmloc> |
| - | [[imagemapping: | + | |
| - | [[imagemapping: | + | |
| - | [[imagemapping: | + | |
| - | [[imagemapping: | + | |
| - | {{<map}} | + | |
| - | <wrap imaploc #CP002>Arthur Ross Pinetum</ | + | ====== Map with Media-Link Marker ====== |
| - | <wrap imaploc #CP003>Diana Ross Playground</ | + | |
| - | <wrap imaploc # | + | {{imapmarkers> |
| - | <wrap imaploc #CP004>Summit Rock</ | + | [[imapmarkers: |
| - | <wrap hi> | + | [[imapmarkers: |
| - | <wrap imapcfg #CP001> | + | [[imapmarkers: |
| + | [[imapmarkers: | ||
| + | {{cfg>}} | ||
| { | { | ||
| " | " | ||
| Zeile 48: | Zeile 51: | ||
| " | " | ||
| } | } | ||
| - | </ | + | {{< |
| + | {{< | ||
| + | |||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | <wrap hi> | ||
| ====== Map with External URL Marker ====== | ====== Map with External URL Marker ====== | ||
| - | {{map> | + | {{imapmarkers> |
| - | [[imagemapping:start|TS01 Tompkins Square Pool @ 357, | + | [[imapmarkers:start|TS01| Tompkins Square Pool @ 357, |
| - | [[imagemapping:start|TS02 Pets Playground @ 311, | + | [[imapmarkers:start|TS02| Pets Playground @ 311, |
| - | {{<map}} | + | {{cfg>}} |
| - | + | ||
| - | <wrap imaploc # | + | |
| - | <wrap imaploc # | + | |
| - | <wrap hi> | + | |
| - | <wrap imapcfg #TS01> | + | |
| { | { | ||
| " | " | ||
| Zeile 66: | Zeile 71: | ||
| " | " | ||
| } | } | ||
| - | </wrap> | + | {{<cfg}} |
| + | {{< | ||
| - | ===== About ===== | + | {{imapmloc> |
| + | {{imapmloc> | ||
| + | <wrap hi> | ||
| - | If you change the original script.js in the plug-in **[[https:// | ||
| - | This may be very useful for maps. | ||
| - | A word to the author of [[https:// | ||
| - | |||
| - | Used plug-in: **[[https:// | ||
| - | |||
| - | ===== How to use? ===== | ||
| - | |||
| - | Add to the mappings (areas) an unique identifier. | ||
| - | Unique in the sense, that only their lower case form are used. | ||
| - | This is the **first word** in the title of the mapping. | ||
| - | |||
| - | E.g. '' | ||
| - | The identifier is: '' | ||
| - | The coordinates (here) '' | ||
| - | |||
| - | You now may add spans (references) with the CSS-class '' | ||
| - | I've used the plug-in **[[https:// | ||
| - | |||
| - | Reference wiki code (with wrap): '' | ||
| - | |||
| - | You may use multiple references for the same identifyer. | ||
| - | You can place references at anyplace in the page. | ||
| - | There is no rule to place them right behind the image mapping. | ||
| - | |||
| - | In case you click the reference, a marker is shown at the given point. | ||
| - | Works with all three forms of mapping: circle, rectangle and polygon. | ||
| ===== This Page Source ===== | ===== This Page Source ===== | ||
| < | < | ||
| - | ====== Image Map Plugin With Marker ====== | ||
| - | |||
| ====== Map with Internal Marker ====== | ====== Map with Internal Marker ====== | ||
| - | {{map> | + | {{imapmarkers> |
| - | [[https:// | + | [[https:// |
| - | [[https:// | + | [[https:// |
| - | [[https:// | + | [[https:// |
| - | [[https:// | + | [[https:// |
| - | [[https:// | + | [[https:// |
| - | [[https:// | + | [[https:// |
| - | [[https:// | + | [[wp>Australia|CON7|Australia @ 510,232,30]] |
| - | {{< | + | [[wp>Australia|Australia II @ 510, |
| - | + | [[|Australia | |
| - | <wrap imaploc # | + | {{cfg>}} |
| - | <wrap imaploc # | + | |
| - | <wrap imaploc # | + | |
| - | <wrap imaploc # | + | |
| - | <wrap imaploc # | + | |
| - | <wrap imaploc # | + | |
| - | <wrap imaploc #CON7>Australia</ | + | |
| - | <wrap hi> | + | |
| - | <wrap imapcfg #CON1> | + | |
| { | { | ||
| " | " | ||
| - | "clicked_reference_css": { " | + | "clicked-reference-css": { " |
| + | " | ||
| + | " | ||
| } | } | ||
| - | </wrap> | + | {{<cfg}} |
| + | {{< | ||
| - | ====== Map with Media-Link Marker ====== | + | {{imapmloc> |
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | <wrap hi> | ||
| - | {{map>imagemapping: | + | ++ Continents |\\ {{imapmloc>CON1|Asia}}\\ {{imapmloc> |
| - | [[imagemapping: | + | |
| - | [[imagemapping: | + | |
| - | [[imagemapping: | + | |
| - | [[imagemapping: | + | |
| - | {{<map}} | + | |
| - | <wrap imaploc #CP002>Arthur Ross Pinetum</ | + | ====== Map with Media-Link Marker ====== |
| - | <wrap imaploc #CP003>Diana Ross Playground</ | + | |
| - | <wrap imaploc # | + | {{imapmarkers> |
| - | <wrap imaploc #CP004>Summit Rock</ | + | [[imapmarkers: |
| - | <wrap hi> | + | [[imapmarkers: |
| - | <wrap imapcfg #CP001> | + | [[imapmarkers: |
| + | [[imapmarkers: | ||
| + | {{cfg>}} | ||
| { | { | ||
| " | " | ||
| Zeile 149: | Zeile 127: | ||
| " | " | ||
| } | } | ||
| - | </ | + | {{< |
| + | {{< | ||
| + | |||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | <wrap hi> | ||
| ====== Map with External URL Marker ====== | ====== Map with External URL Marker ====== | ||
| - | {{map> | + | {{imapmarkers> |
| - | [[imagemapping:start|TS01 Tompkins Square Pool @ 357, | + | [[imapmarkers:start|TS01| Tompkins Square Pool @ 357, |
| - | [[imagemapping:start|TS02 Pets Playground @ 311, | + | [[imapmarkers:start|TS02| Pets Playground @ 311, |
| - | {{<map}} | + | {{cfg>}} |
| - | + | ||
| - | <wrap imaploc # | + | |
| - | <wrap imaploc # | + | |
| - | <wrap hi> | + | |
| - | <wrap imapcfg #TS01> | + | |
| { | { | ||
| " | " | ||
| Zeile 167: | Zeile 147: | ||
| " | " | ||
| } | } | ||
| - | </ | + | {{< |
| + | {{< | ||
| + | |||
| + | {{imapmloc> | ||
| + | {{imapmloc> | ||
| + | <wrap hi> | ||
| </ | </ | ||
| - | |||
| - | ===== Javascript Replacement Source (aka. the Plug-Ins „script.js“) ===== | ||
| - | |||
| - | <file javascript script.js> | ||
| - | /* DOKUWIKI: | ||
| - | |||
| - | |||
| - | // Original source code: https:// | ||
| - | globalThis[Symbol.for(' | ||
| - | var defaults = { | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | }; | ||
| - | var a_maps = []; | ||
| - | var a_areas = []; | ||
| - | var a_references = []; | ||
| - | var resize_timeout = null; | ||
| - | var a_last_clicked_id = []; | ||
| - | var a_imap_div = []; | ||
| - | var imap_div_interval = null; | ||
| - | var nr_startup_intervals = 0; | ||
| - | | ||
| - | function make_svg_and_append_to_jquery_object(html, | ||
| - | object[0].insertAdjacentHTML( | ||
| - | " | ||
| - | html | ||
| - | ); | ||
| - | } // function make_svg_and_append_to_jquery_object | ||
| - | |||
| - | function calc_marker_pos(coords) { | ||
| - | let split_coords = coords.split("," | ||
| - | var x = 0; | ||
| - | var y = 0; | ||
| - | switch(split_coords.length) { | ||
| - | case 3: // circle | ||
| - | x = parseInt(split_coords[0]); | ||
| - | y = parseInt(split_coords[1]); | ||
| - | break; | ||
| - | case 4: // rectangle | ||
| - | x = Math.floor((parseInt(split_coords[0])+parseInt(split_coords[2]))/ | ||
| - | y = Math.floor((parseInt(split_coords[1])+parseInt(split_coords[3]))/ | ||
| - | break; | ||
| - | default: | ||
| - | if(split_coords.length >= 6) { | ||
| - | var num_coords = 0; | ||
| - | for(var i = 0; i < (split_coords.length - 1); i += 2) { | ||
| - | x += parseInt(split_coords[i]); | ||
| - | y += parseInt(split_coords[i + 1]); | ||
| - | num_coords++; | ||
| - | } | ||
| - | x = Math.floor(x / num_coords); | ||
| - | y = Math.floor(y / num_coords);; | ||
| - | } | ||
| - | } | ||
| - | return [ x, y ]; | ||
| - | } // function calc_marker_pos | ||
| - | | ||
| - | function get_id_from_string(s) { | ||
| - | const a_ids = s.split(" | ||
| - | if (a_ids.length >= 1) { | ||
| - | if (a_ids[0].length > 0) { | ||
| - | return "#" | ||
| - | } | ||
| - | } | ||
| - | return null; | ||
| - | } | ||
| - | |||
| - | function find_area_by_id(id, | ||
| - | try { | ||
| - | if (imap_index === null) { | ||
| - | for(var i = 0; i < a_areas.length; | ||
| - | if (a_areas[i] !== undefined) { | ||
| - | for(var j = 0; j < a_areas[i].length; | ||
| - | const area = a_areas[i][j]; | ||
| - | if (area[' | ||
| - | return [ i, area[' | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | } else { | ||
| - | if (a_areas[imap_index] !== undefined) { | ||
| - | for(var j = 0; j < a_areas[imap_index].length; | ||
| - | const area = a_areas[imap_index][j]; | ||
| - | if (area[' | ||
| - | return [ imap_index, area[' | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | } catch(e) { console.error(" | ||
| - | return [ -1, null, -1 ]; | ||
| - | } // function find_area_by_id | ||
| - | | ||
| - | return { | ||
| - | // exported variables: | ||
| - | defaults: defaults, | ||
| - | a_maps: a_maps, | ||
| - | a_areas: a_areas, | ||
| - | a_references: | ||
| - | resize_timeout: | ||
| - | a_last_clicked_id: | ||
| - | a_imap_div: a_imap_div, | ||
| - | imap_div_interval: | ||
| - | nr_startup_intervals: | ||
| - | // exported functions: | ||
| - | make_svg_and_append_to_jquery_object: | ||
| - | calc_marker_pos: | ||
| - | get_id_from_string: | ||
| - | find_area_by_id: | ||
| - | }; | ||
| - | })(); | ||
| - | |||
| - | |||
| - | addEventListener(" | ||
| - | (function($) { | ||
| - | var _g = globalThis[Symbol.for(' | ||
| - | | ||
| - | $(' | ||
| - | fillColor: ' | ||
| - | fillOpacity: | ||
| - | wrapClass: true, | ||
| - | wrapCss: true, | ||
| - | clickNavigate: | ||
| - | }); | ||
| - | | ||
| - | function get_marker_width_and_height(id) { | ||
| - | return [ $(id).width(), | ||
| - | } // function get_marker_width_and_height | ||
| - | | ||
| - | function do_marker_if_resize() { | ||
| - | _g.a_imap_div.forEach((object, | ||
| - | let marker_id_jquery = "# | ||
| - | if(_g.defaults[' | ||
| - | if((_g.a_last_clicked_id[index] !== undefined) && (_g.a_last_clicked_id[index][' | ||
| - | let id = _g.a_last_clicked_id[index][' | ||
| - | let area_index = _g.a_last_clicked_id[index][' | ||
| - | if(_g.defaults[' | ||
| - | try { | ||
| - | let found_area = _g.a_areas[index][area_index][' | ||
| - | let marker_id_jquery = "# | ||
| - | let coords = found_area.attr(" | ||
| - | let xy = _g.calc_marker_pos(coords); | ||
| - | let wh = get_marker_width_and_height(marker_id_jquery); | ||
| - | $(marker_id_jquery).css({ top: xy[1] - wh[1] + 3, left: xy[0] - (wh[0] / 2) }); | ||
| - | } catch(e) { console.error(" | ||
| - | } | ||
| - | }); | ||
| - | } // do_marker_if_resize | ||
| - | |||
| - | $(window).resize(function() { | ||
| - | if (_g.resize_timeout != null) { clearTimeout(_g.resize_timeout); | ||
| - | _g.resize_timeout = setTimeout(function() { | ||
| - | $(' | ||
| - | let parent = $(this.offsetParent); | ||
| - | let parentparent = $(parent).parent(); | ||
| - | //if (_g.defaults[' | ||
| - | // console.log(" | ||
| - | // console.log(" | ||
| - | // console.log(" | ||
| - | //} | ||
| - | // limit image width to naturalWidth: | ||
| - | $(this).mapster(' | ||
| - | }); | ||
| - | do_marker_if_resize(); | ||
| - | }, 100); | ||
| - | }); | ||
| - | | ||
| - | _g.imap_div_interval = setInterval(function() { | ||
| - | if(_g.defaults[' | ||
| - | _g.nr_startup_intervals++; | ||
| - | if (_g.nr_startup_intervals >= 50) { | ||
| - | // stop after 5 s searching: | ||
| - | clearInterval(_g.imap_div_interval); | ||
| - | if(_g.defaults[' | ||
| - | return; | ||
| - | } | ||
| - | // find container and maps: | ||
| - | var imap_index = 0; | ||
| - | $(" | ||
| - | let tag = $(this).prop(" | ||
| - | if ((tag == " | ||
| - | if(_g.defaults[' | ||
| - | _g.a_imap_div[imap_index] = $(this); | ||
| - | } else { | ||
| - | if ((tag == " | ||
| - | _g.a_maps[imap_index] = $(this); | ||
| - | if(_g.defaults[' | ||
| - | imap_index++; | ||
| - | } | ||
| - | } | ||
| - | }); | ||
| - | if ((_g.a_imap_div[0] !== undefined) && (_g.a_imap_div[0] !== null)) { | ||
| - | // clear search interval: | ||
| - | clearInterval(_g.imap_div_interval); | ||
| - | _g.a_imap_div.forEach((object, | ||
| - | // set z-index for images: | ||
| - | if(_g.defaults[' | ||
| - | object.find(" | ||
| - | // create marker: | ||
| - | let marker_id = " | ||
| - | let svg_marker = '< | ||
| - | '< | ||
| - | ' | ||
| - | ' | ||
| - | ' | ||
| - | '</ | ||
| - | '</ | ||
| - | _g.make_svg_and_append_to_jquery_object(svg_marker, | ||
| - | let marker_id_jquery = "#" | ||
| - | $(marker_id_jquery).css(" | ||
| - | $(marker_id_jquery).css(" | ||
| - | $(marker_id_jquery).css(" | ||
| - | $(marker_id_jquery).css(" | ||
| - | $(marker_id_jquery).css(" | ||
| - | $(marker_id_jquery).css(" | ||
| - | $(" | ||
| - | $(marker_id_jquery).hide(); | ||
| - | if(_g.defaults[' | ||
| - | // collect areas: | ||
| - | if (_g.a_maps[index] !== undefined) { | ||
| - | _g.a_maps[index].find(" | ||
| - | if (_g.a_areas[index] === undefined) { | ||
| - | _g.a_areas[index] = []; | ||
| - | } | ||
| - | const area_id = _g.get_id_from_string($(this).attr(" | ||
| - | _g.a_areas[index].push({ ' | ||
| - | if(_g.defaults[' | ||
| - | }); | ||
| - | } | ||
| - | }); | ||
| - | // search for references: | ||
| - | $(" | ||
| - | try { | ||
| - | var id = ""; | ||
| - | if ($(this).attr(" | ||
| - | id = "#" | ||
| - | } else { | ||
| - | const html = $(this).html(); | ||
| - | const a_ids = html.split(" | ||
| - | id = "#" | ||
| - | } | ||
| - | if (id.length > 0) { | ||
| - | if(_g.defaults[' | ||
| - | // find corresponding area | ||
| - | let ia = _g.find_area_by_id(id); | ||
| - | let imap_index = ia[0]; | ||
| - | let found_area = ia[1]; | ||
| - | let area_index = ia[2]; | ||
| - | if (found_area != null) { | ||
| - | if ($(id).length) { | ||
| - | if (_g.a_references[imap_index] === undefined) { | ||
| - | _g.a_references[imap_index] = []; | ||
| - | } | ||
| - | _g.a_references[imap_index].push({ ' | ||
| - | if(_g.defaults[' | ||
| - | $(this).bind(" | ||
| - | var data = e.data; | ||
| - | let imap_index = data[' | ||
| - | let marker_id_jquery = "# | ||
| - | let area_index = data[' | ||
| - | let id = data[' | ||
| - | if(_g.defaults[' | ||
| - | if ((_g.a_last_clicked_id[imap_index] !== undefined) && (_g.a_last_clicked_id[imap_index][' | ||
| - | // hide marker | ||
| - | $(marker_id_jquery).hide(); | ||
| - | _g.a_references[imap_index].forEach((object, | ||
| - | if (object[' | ||
| - | object[' | ||
| - | object[' | ||
| - | } | ||
| - | }); | ||
| - | $(this).css(' | ||
| - | $(this).css(' | ||
| - | } else { | ||
| - | // show marker | ||
| - | let coords = data[' | ||
| - | let xy = _g.calc_marker_pos(coords); | ||
| - | let wh = get_marker_width_and_height(marker_id_jquery); | ||
| - | $(marker_id_jquery).css({ top: xy[1] - wh[1] + 3, left: xy[0] - (wh[0] / 2) }); | ||
| - | $(marker_id_jquery).show(); | ||
| - | _g.a_references[imap_index].forEach((object, | ||
| - | if (object[' | ||
| - | object[' | ||
| - | object[' | ||
| - | } else { | ||
| - | object[' | ||
| - | object[' | ||
| - | } | ||
| - | }); | ||
| - | } | ||
| - | if(_g.defaults[' | ||
| - | _g.a_last_clicked_id[imap_index] = { ' | ||
| - | }); | ||
| - | $(this).css(' | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | } catch(e) { console.error(" | ||
| - | }); | ||
| - | } | ||
| - | }, 100); | ||
| - | })(jQuery); | ||
| - | }); | ||
| - | |||
| - | function addBtnActionImagemap(btn, | ||
| - | // Not implemented yet | ||
| - | } | ||
| - | </ | ||