| New file |
|---|
| 0,0 → 1,228 |
|---|
| /** |
| * @name MapIconMaker |
| * @version 1.1 |
| * @author Pamela Fox |
| * @copyright (c) 2008 Pamela Fox |
| * @fileoverview This gives you static functions for creating dynamically |
| * sized and colored marker icons using the Charts API marker output. |
| */ |
| |
| /* |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| /** |
| * @name MarkerIconOptions |
| * @class This class represents optional arguments to {@link createMarkerIcon}, |
| * {@link createFlatIcon}, or {@link createLabeledMarkerIcon}. Each of the |
| * functions use a subset of these arguments. See the function descriptions |
| * for the list of supported options. |
| * @property {Number} [width=32] Specifies, in pixels, the width of the icon. |
| * The width may include some blank space on the side, depending on the |
| * height of the icon, as the icon will scale its shape proportionately. |
| * @property {Number} [height=32] Specifies, in pixels, the height of the icon. |
| * @property {String} [primaryColor="#ff0000"] Specifies, as a hexadecimal |
| * string, the color used for the majority of the icon body. |
| * @property {String} [cornerColor="#ffffff"] Specifies, as a hexadecimal |
| * string, the color used for the top corner of the icon. If you'd like the |
| * icon to have a consistent color, make the this the same as the |
| * {@link primaryColor}. |
| * @property {String} [strokeColor="#000000"] Specifies, as a hexadecimal |
| * string, the color used for the outside line (stroke) of the icon. |
| * @property {String} [shadowColor="#000000"] Specifies, as a hexadecimal |
| * string, the color used for the shadow of the icon. |
| * @property {String} [label=""] Specifies a character or string to display |
| * inside the body of the icon. Generally, one or two characters looks best. |
| * @property {String} [labelColor="#000000"] Specifies, as a hexadecimal |
| * string, the color used for the label text. |
| * @property {Number} [labelSize=0] Specifies, in pixels, the size of the label |
| * text. If set to 0, the text auto-sizes to fit the icon body. |
| * @property {String} [shape="circle"] Specifies shape of the icon. Current |
| * options are "circle" for a circle or "roundrect" for a rounded rectangle. |
| * @property {Boolean} [addStar = false] Specifies whether to add a star to the |
| * edge of the icon. |
| * @property {String} [starPrimaryColor="#FFFF00"] Specifies, as a hexadecimal |
| * string, the color used for the star body. |
| * @property {String} [starStrokeColor="#0000FF"] Specifies, as a hexadecimal |
| * string, the color used for the outside line (stroke) of the star. |
| */ |
| |
| /** |
| * This namespace contains functions that you can use to easily create |
| * dynamically sized, colored, and labeled icons. |
| * @namespace |
| */ |
| var MapIconMaker = {}; |
| |
| /** |
| * Creates an icon based on the specified options in the |
| * {@link MarkerIconOptions} argument. |
| * Supported options are: width, height, primaryColor, |
| * strokeColor, and cornerColor. |
| * @param {MarkerIconOptions} [opts] |
| * @return {GIcon} |
| */ |
| MapIconMaker.createMarkerIcon = function (opts) { |
| var width = opts.width || 32; |
| var height = opts.height || 32; |
| var primaryColor = opts.primaryColor || "#ff0000"; |
| var strokeColor = opts.strokeColor || "#000000"; |
| var cornerColor = opts.cornerColor || "#ffffff"; |
| |
| var baseUrl = "http://chart.apis.google.com/chart?cht=mm"; |
| var iconUrl = baseUrl + "&chs=" + width + "x" + height + |
| "&chco=" + cornerColor.replace("#", "") + "," + |
| primaryColor.replace("#", "") + "," + |
| strokeColor.replace("#", "") + "&ext=.png"; |
| var icon = new GIcon(G_DEFAULT_ICON); |
| icon.image = iconUrl; |
| icon.iconSize = new GSize(width, height); |
| icon.shadowSize = new GSize(Math.floor(width * 1.6), height); |
| icon.iconAnchor = new GPoint(width / 2, height); |
| icon.infoWindowAnchor = new GPoint(width / 2, Math.floor(height / 12)); |
| icon.printImage = iconUrl + "&chof=gif"; |
| icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif"; |
| iconUrl = baseUrl + "&chs=" + width + "x" + height + |
| "&chco=" + cornerColor.replace("#", "") + "," + |
| primaryColor.replace("#", "") + "," + |
| strokeColor.replace("#", ""); |
| icon.transparent = iconUrl + "&chf=a,s,ffffff11&ext=.png"; |
| |
| icon.imageMap = [ |
| width / 2, height, |
| (7 / 16) * width, (5 / 8) * height, |
| (5 / 16) * width, (7 / 16) * height, |
| (7 / 32) * width, (5 / 16) * height, |
| (5 / 16) * width, (1 / 8) * height, |
| (1 / 2) * width, 0, |
| (11 / 16) * width, (1 / 8) * height, |
| (25 / 32) * width, (5 / 16) * height, |
| (11 / 16) * width, (7 / 16) * height, |
| (9 / 16) * width, (5 / 8) * height |
| ]; |
| for (var i = 0; i < icon.imageMap.length; i++) { |
| icon.imageMap[i] = parseInt(icon.imageMap[i]); |
| } |
| |
| return icon; |
| }; |
| |
| |
| /** |
| * Creates a flat icon based on the specified options in the |
| * {@link MarkerIconOptions} argument. |
| * Supported options are: width, height, primaryColor, |
| * shadowColor, label, labelColor, labelSize, and shape.. |
| * @param {MarkerIconOptions} [opts] |
| * @return {GIcon} |
| */ |
| MapIconMaker.createFlatIcon = function (opts) { |
| var width = opts.width || 32; |
| var height = opts.height || 32; |
| var primaryColor = opts.primaryColor || "#ff0000"; |
| var shadowColor = opts.shadowColor || "#000000"; |
| var label = MapIconMaker.escapeUserText_(opts.label) || ""; |
| var labelColor = opts.labelColor || "#000000"; |
| var labelSize = opts.labelSize || 0; |
| var shape = opts.shape || "circle"; |
| var shapeCode = (shape === "circle") ? "it" : "itr"; |
| |
| var baseUrl = "http://chart.apis.google.com/chart?cht=" + shapeCode; |
| var iconUrl = baseUrl + "&chs=" + width + "x" + height + |
| "&chco=" + primaryColor.replace("#", "") + "," + |
| shadowColor.replace("#", "") + "ff,ffffff01" + |
| "&chl=" + label + "&chx=" + labelColor.replace("#", "") + |
| "," + labelSize; |
| var icon = new GIcon(G_DEFAULT_ICON); |
| icon.image = iconUrl + "&chf=bg,s,00000000" + "&ext=.png"; |
| icon.iconSize = new GSize(width, height); |
| icon.shadowSize = new GSize(0, 0); |
| icon.iconAnchor = new GPoint(width / 2, height / 2); |
| icon.infoWindowAnchor = new GPoint(width / 2, height / 2); |
| icon.printImage = iconUrl + "&chof=gif"; |
| icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif"; |
| icon.transparent = iconUrl + "&chf=a,s,ffffff01&ext=.png"; |
| icon.imageMap = []; |
| if (shapeCode === "itr") { |
| icon.imageMap = [0, 0, width, 0, width, height, 0, height]; |
| } else { |
| var polyNumSides = 8; |
| var polySideLength = 360 / polyNumSides; |
| var polyRadius = Math.min(width, height) / 2; |
| for (var a = 0; a < (polyNumSides + 1); a++) { |
| var aRad = polySideLength * a * (Math.PI / 180); |
| var pixelX = polyRadius + polyRadius * Math.cos(aRad); |
| var pixelY = polyRadius + polyRadius * Math.sin(aRad); |
| icon.imageMap.push(parseInt(pixelX), parseInt(pixelY)); |
| } |
| } |
| |
| return icon; |
| }; |
| |
| |
| /** |
| * Creates a labeled marker icon based on the specified options in the |
| * {@link MarkerIconOptions} argument. |
| * Supported options are: primaryColor, strokeColor, |
| * starPrimaryColor, starStrokeColor, label, labelColor, and addStar. |
| * @param {MarkerIconOptions} [opts] |
| * @return {GIcon} |
| */ |
| MapIconMaker.createLabeledMarkerIcon = function (opts) { |
| var primaryColor = opts.primaryColor || "#DA7187"; |
| var strokeColor = opts.strokeColor || "#000000"; |
| var starPrimaryColor = opts.starPrimaryColor || "#FFFF00"; |
| var starStrokeColor = opts.starStrokeColor || "#0000FF"; |
| var label = MapIconMaker.escapeUserText_(opts.label) || ""; |
| var labelColor = opts.labelColor || "#000000"; |
| var addStar = opts.addStar || false; |
| |
| var pinProgram = (addStar) ? "pin_star" : "pin"; |
| var baseUrl = "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl="; |
| var iconUrl = baseUrl + pinProgram + "'i\\" + "'[" + label + |
| "'-2'f\\" + "hv'a\\]" + "h\\]o\\" + |
| primaryColor.replace("#", "") + "'fC\\" + |
| labelColor.replace("#", "") + "'tC\\" + |
| strokeColor.replace("#", "") + "'eC\\"; |
| if (addStar) { |
| iconUrl += starPrimaryColor.replace("#", "") + "'1C\\" + |
| starStrokeColor.replace("#", "") + "'0C\\"; |
| } |
| iconUrl += "Lauto'f\\"; |
| |
| var icon = new GIcon(G_DEFAULT_ICON); |
| icon.image = iconUrl + "&ext=.png"; |
| icon.iconSize = (addStar) ? new GSize(23, 39) : new GSize(21, 34); |
| return icon; |
| }; |
| |
| |
| /** |
| * Utility function for doing special chart API escaping first, |
| * and then typical URL escaping. Must be applied to user-supplied text. |
| * @private |
| */ |
| MapIconMaker.escapeUserText_ = function (text) { |
| if (text === undefined) { |
| return null; |
| } |
| text = text.replace(/@/, "@@"); |
| text = text.replace(/\\/, "@\\"); |
| text = text.replace(/'/, "@'"); |
| text = text.replace(/\[/, "@["); |
| text = text.replace(/\]/, "@]"); |
| return encodeURIComponent(text); |
| }; |
| |
| |
