Load a client-side image map from the server, attach it to the image and scale the map responsively.

Function:

Graphviz produces image files with a client-side image map in a separate file. By convention, if the image file is named some-image.png (or some-image.jpg or some-image.gif) then the image map file is named some-image.cmapx . The cmapx file has a simple format which could be easily created by hand or by other software.

This module uses JavaScript to attach a client-side image map to an image by loading the cmapx file from the same directory as the image file. If no such cmapx file exists or JavaScript is not enabled in the browser, no error is signaled and the page loads normally.

After the image map is attached to the image, changes in the size of the browser window are detected and the image map is modified to match, thus making the image map responsive to browser size.
Installation:

Install and enable this module in the usual way. Wherever you load an image which has (or could have) an image map, edit the HTML <img ...> referencing the image to add onload="load_image_map(this)" . Store the image map in a file in the same directory as the image file with the same name as the image file but replace the extension jpg (gif, png) with cmapx.

Related:

The Responsive Image Maps module adjusts an image map stored in the page to respond to changes in browser window size.
The Graphviz module implements a Graph API hook for views integration.
The Graphviz Filter module treats input text as Graphviz DOT syntax, converts it using Graphviz tools to the requested format(s) and renders it in HTML.
The Graphviz Noderef module displays nodes as a Graphviz graph/map, with NodeReference fields as edges between nodes.

Project link

https://www.drupal.org/sandbox/walthaas/2666300

Git instructions

git clone --branch 7.x-1.x https://git.drupal.org/sandbox/WaltHaas/2666300.git load_image_map

Comments

Walt Haas created an issue. See original summary.

Walt Haas’s picture

Issue summary: View changes
Walt Haas’s picture

PA robot’s picture

Status: Needs review » Needs work

There are some errors reported by automated review tools, did you already check them? See http://pareview.sh/pareview/httpgitdrupalorgsandboxWaltHaas2666300git

We are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)

Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).

I'm a robot and this is an automated message from Project Applications Scraper.

Walt Haas’s picture

Status: Needs work » Needs review
shaktik’s picture

@Walt Haas

I am not able to clone your project.

Walt Haas’s picture

Issue summary: View changes
Walt Haas’s picture

Corrected git clone command in instructions.

shaktik’s picture

Manual Review

found some issues with your code (please check the Drupal coding standards).

http://cgit.drupalcode.org/sandbox-WaltHaas-2666300/tree/load_image_map....
Line indented incorrectly;

  "use strict";
  Drupal.behaviors.loadImageMap = function (img) {
    if (!img.src) {
        return;
      }
      

http://cgit.drupalcode.org/sandbox-WaltHaas-2666300/tree/load_image_map....
Line indented incorrectly;

Automated Review

  • ESLint has found some issues with your code (please check the JavaScript coding standards).

    http://pareview.sh/pareview/httpgitdrupalorgsandboxwalthaas2666300git
    There are 7 problems .
  • abhiklpm’s picture

    Status: Needs review » Needs work

    Could you take a look at https://www.drupal.org/project/responsive_imagemaps and explain how this module differs from that please?

    klausi’s picture

    Status: Needs work » Needs review

    Duplication is bad and we should make applicants aware of it, but it is not an application blocker.

    Walt Haas’s picture

    The responsive imagemaps module works on an image map which is part of the HTML of the page. The load image map module loads an image map which is in a separate file.

    The difference is important because when you use graphviz to generate an image file, you get a second file (.cmapx) with the image map. In order to use the responsive imagemaps module you would need to first edit the contents of the .cmapx file into the page, a slow, error-prone manual step. But using the load image maps module, you run graphviz to generate the image and map files and the new map is picked up automatically when the page that references the image is reloaded.

    djalxs’s picture

    Issue summary: View changes

    This automated report was generated with PAReview.sh, your friendly project application review script. You can also use the online version to check your project. You have to get a review bonus to get a review from me.

    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 14, col 3, Error - Strings must use singlequote. (quotes)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 16, col 7, Error - Expected indentation of 4 spaces but found 6. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 22, col 7, Error - Expected indentation of 4 spaces but found 6. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 25, col 7, Error - Expected indentation of 4 spaces but found 6. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 28, col 7, Error - Expected indentation of 4 spaces but found 6. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 28, col 23, Error - Multiple spaces found before 'function'. (no-multi-spaces)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 31, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 32, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 36, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 37, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 38, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 42, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 48, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 56, col 13, Error - Split 'var' declarations into multiple statements. (one-var)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 62, col 13, Error - Closing curly brace appears on the same line as the subsequent block. (brace-style)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 90, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 93, col 11, Error - Expected indentation of 8 spaces but found 10. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 96, col 7, Error - Expected indentation of 4 spaces but found 6. (indent)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 97, col 15, Error - Strings must use singlequote. (quotes)
    /root/repos/pareviewsh/pareview_temp/load_image_map.js: line 101, col 5, Error - Expected indentation of 2 spaces but found 4. 
    

    Although the above is not technically an issue blocker, it would go a long way to getting this project approved.

    I've also removed the broken Git command from the issue summary as there were 2 commands. The issue summary now only contains the correct command.

    To re-run the PAReview test, click here.

    apaderno’s picture

    Priority: Normal » Critical

    To the reviewers: Please change back the priority to Normal after doing a review.

    apaderno’s picture

    Issue summary: View changes
    sleitner’s picture

    Priority: Critical » Normal
    Status: Needs review » Needs work

    Automated Review

    Pareview details: https://pareview.sh/pareview/https-git.drupal.org-sandbox-walthaas-26663...

    Review of the 7.x-1.x branch (commit 267d5a3):

    This automated report was generated with PAReview.sh, your friendly project application review script.

    Manual Review

    Individual user account
    Yes: Follows the guidelines for individual user accounts.
    No duplication
    No: Causes module duplication and/or fragmentation, see issue description, maybe they do not exactly the same, but simular
    Master Branch
    Yes: Follows the guidelines for master branch.
    Licensing
    Yes: Follows the licensing requirements.
    3rd party assets/code
    Yes: Follows the guidelines for 3rd party assets/code.
    README.txt/README.md
    No: Does not follow the guidelines for in-project documentation and/or the README Template. See pareview.
    Code long/complex enough for review
    Yes: Follows the guidelines for project length and complexity.
    Secure code
    Yes: Meets the security requirements.
    Coding style & Drupal API usage
    See pareview.

    The starred items (*) are fairly big issues and warrant going back to Needs Work. Items marked with a plus sign (+) are important and should be addressed before a stable project release. The rest of the comments in the code walkthrough are recommendations.

    If added, please don't remove the security tag, we keep that for statistics and to show examples of security problems.

    This review uses the Project Application Review Template.

    apaderno’s picture

    Status: Needs work » Closed (won't fix)

    If you are still working on this application, you should fix all known problems and set the status to Needs review. (See also the project application workflow.)
    Please don't change status of this application if you aren't sure you have time to dedicate to this application, or it will be closed again as won't fix.

    I am closing this application due to lack of activity.