diff --git a/README.md b/README.md index 9897e23..9444b44 100755 --- a/README.md +++ b/README.md @@ -2,10 +2,10 @@ Interactive vectorial map of Catalunya based on a SVG/VML and the library RaphaëlJs. -screen-shot +screen-shot ## Current versions -* Raphaël JS - 2.2.1 +* Raphaël JS - 2.3.0 * ScaleRaphael - 0.8 * jQuery - 3.1.1 * Bootstrap - 3.3.7 @@ -34,7 +34,7 @@ Interactive vectorial map of Catalunya based on a SVG/VML and the library Rapha ... - + @@ -43,29 +43,27 @@ Interactive vectorial map of Catalunya based on a SVG/VML and the library Rapha - + ... Explanation: - catalunya-map-v2.css : custom css theme (v1/v2) + catalunya-map-v3.css : custom css theme (v1/v2/v3) 1.2 footer Source files Explanation : - catalunya-map-path.js : js file that have the javascript array with all the data - catalunya-map.js : js file that have the object to create maps - catalunya-map-config-local.js : js file that have the custom options - catalunya-map-prod.js : js file that create an object map and print it in the screen + catalunya-map-path-sample.js : js file that have the javascript array with all the data + catalunya-map-min.js : js file that have the object to create maps 2. Add this code in the body diff --git a/changelog.md b/changelog.md index 463c58c..05d63d6 100644 --- a/changelog.md +++ b/changelog.md @@ -84,4 +84,9 @@ v9.0 v10.0 - Migration to webpack -- add Comarca Llucanes \ No newline at end of file +- add Comarca Llucanes + +V11.0 +- Center names by default using getBox +- Update to 2.3.0 raphaeel JS library +- Add use of extra_x and extra_y to help to place names \ No newline at end of file diff --git a/demo.md b/demo.md index 07fdfd3..af9bb4e 100644 --- a/demo.md +++ b/demo.md @@ -19,4 +19,5 @@ - [Demo v7.5](http://demo.catalunyamedieval.es/map75) - [Demo v8.0](http://demo.catalunyamedieval.es/map80) - [Demo v9.0](http://demo.catalunyamedieval.es/map90) -- [Demo v10.0](http://demo.catalunyamedieval.es/map10) \ No newline at end of file +- [Demo v10.0](http://demo.catalunyamedieval.es/map10) +- [Demo v11.0](http://demo.catalunyamedieval.es/map11) \ No newline at end of file diff --git a/screenshot/Screenshot-v11.png b/screenshot/Screenshot-v11.png new file mode 100644 index 0000000..80680c2 Binary files /dev/null and b/screenshot/Screenshot-v11.png differ diff --git a/src/app/catalunya-map.js b/src/app/catalunya-map.js index 45e6e16..c4d769a 100755 --- a/src/app/catalunya-map.js +++ b/src/app/catalunya-map.js @@ -1,8 +1,8 @@ /** - * Catalunya Medieval 2015-2023 - Open Source Catalunya Map + * Catalunya Medieval 2015-2024 - Open Source Catalunya Map * * Author : Enric Ballo - * version : 10.0 + * version : 11.0 * */ ; @@ -16,7 +16,7 @@ class CatMap { this.win; this.selected; this.ratio; - this.mcat = {}; //Array of comarcas + this.mcat = {}; //Array of comarques } showValues(){ @@ -29,7 +29,7 @@ class CatMap { createArrayComarcas(){ if (this.config.debug) { - console.log('create Array Comarcas...'); + console.log('Create Array of Comarques'); } for (const comarca in this.mappaths) { this.mcat[comarca] = this.paper.set() @@ -39,7 +39,7 @@ class CatMap { createLlistaComarquesText(){ if(this.config.useListText) { if (this.config.debug) { - console.log('create list of comarques ...'); + console.log('Create list of Comarques'); } let llistaComarques = []; @@ -62,7 +62,7 @@ class CatMap { } }else{ if(this.config.debug){ - console.log("create list comarques is disabled") + console.log("Create list comarques is disabled") } } } @@ -70,7 +70,7 @@ class CatMap { createMap(){ if (this.config.debug) { - console.log('CreateMap ...'); + console.log('CreateMap'); } // This objects hack are needed because onHover function @@ -95,79 +95,37 @@ class CatMap { 'fill': config.colorOut }; //if it is not the selected comarca remove styles - if (self.selected != this[0].comarcaName) { - + if (self.selected !== this[0].comarcaName) { this[0].animate(params, 100); this[1].attr(config.nomComcarcaAttr_out); this[2].hide(); } else { - //if it is the selected comarca on hover out treiem la capital + //if it is the selected comarca on hover out - remove the capital //this[2].hide(); } }, obj, obj); if (config.useText) { - // on click event - obj[0].click(function () { - var comarcaName = this.comarcaName; - var capitalComarca = this.capitalComarca; - var contentText = this.contentText; - var comarcaLink = this.comarcaLink; - self.selected = this.comarcaName; - self.remove_background(); - self.onMapClick(comarcaName, capitalComarca, contentText, comarcaLink); - }); - - obj[1].click(function () { - var comarcaName = this.comarcaName; - var capitalComarca = this.capitalComarca; - var contentText = this.contentText; - var comarcaLink = this.comarcaLink; - self.selected = this.comarcaName; - self.remove_background(); - self.onMapClick(comarcaName, capitalComarca, contentText, comarcaLink); - }); - - obj[2].click(function () { - var comarcaName = this.comarcaName; - var capitalComarca = this.capitalComarca; - var contentText = this.contentText; - var comarcaLink = this.comarcaLink; - self.selected = this.comarcaName; - self.remove_background(); - self.onMapClick(comarcaName, capitalComarca, contentText, comarcaLink); - }); - - obj[0].touchstart(function () { - var comarcaName = this.comarcaName; - var capitalComarca = this.capitalComarca; - var contentText = this.contentText; - var comarcaLink = this.comarcaLink; - self.selected = this.comarcaName; - self.remove_background(); - self.onMapClick(comarcaName, capitalComarca, contentText, comarcaLink); - }); - - obj[1].touchstart(function () { - var comarcaName = this.comarcaName; - var capitalComarca = this.capitalComarca; - var contentText = this.contentText; - var comarcaLink = this.comarcaLink; - self.selected = this.comarcaName; - self.remove_background(); - self.onMapClick(comarcaName, capitalComarca, contentText, comarcaLink); - }); + if (this.config.debug) { + console.log("useText is enabled"); + } - obj[2].touchstart(function () { - var comarcaName = this.comarcaName; - var capitalComarca = this.capitalComarca; - var contentText = this.contentText; - var comarcaLink = this.comarcaLink; - self.selected = this.comarcaName; - self.remove_background(); - self.onMapClick(comarcaName, capitalComarca, contentText, comarcaLink); - }); + for (let i = 0; i < 3; i++) { + // on click event + obj[i].click(function () { + self.selected = this.comarcaName; + self.remove_background(); + self.onMapClick(this.comarcaName, this.capitalComarca, this.contentText, this.comarcaLink); + }); + + // touch event + obj[i].touchstart(function () { + self.selected = this.comarcaName; + self.remove_background(); + self.onMapClick(this.comarcaName, this.capitalComarca, this.contentText, this.comarcaLink); + }); + } } i++; @@ -186,28 +144,26 @@ class CatMap { createRaphaelObject(comarca, i) { let obj = this.mcat[comarca]; - // Raphael object - object 0 (the map) - obj.push(this.paper.path(this.mappaths[comarca].path).attr(this.config.comarcaAttr)); - - // object 1 and 2 (comarca name / capital comarca name) - obj.push(this.paper.text(this.mappaths[comarca].nx, this.mappaths[comarca].ny, this.mappaths[comarca].name).attr(this.config.nomComcarcaAttr_out)); - obj.push(this.paper.text(this.mappaths[comarca].cx, this.mappaths[comarca].cy, this.mappaths[comarca].capital).attr(this.config.nomCapitalAttr)); + const path = this.paper.path(this.mappaths[comarca].path); + path.attr(this.config.comarcaAttr) - obj[0].comarcaName = this.mappaths[comarca].name; - obj[1].comarcaName = this.mappaths[comarca].name; - obj[2].comarcaName = this.mappaths[comarca].name; + // Raphael Object - object 0 (the map) + obj.push(path); - obj[0].capitalComarca = this.mappaths[comarca].capital; - obj[1].capitalComarca = this.mappaths[comarca].capital; - obj[2].capitalComarca = this.mappaths[comarca].capital; + const bbox = path.getBBox(); + const {comarca_x, capital_x, comarca_y, capital_y} = this.get_comarca_and_capital_positions_label(comarca, bbox); - obj[0].contentText = this.mappaths[comarca].info; - obj[1].contentText = this.mappaths[comarca].info; - obj[2].contentText = this.mappaths[comarca].info; + // Object 1 and 2 (comarca name / capital comarca name) + obj.push(this.paper.text(comarca_x, comarca_y, this.mappaths[comarca].name).attr(this.config.nomComcarcaAttr_out)); + obj.push(this.paper.text(capital_x, capital_y, this.mappaths[comarca].capital).attr(this.config.nomCapitalAttr)); - obj[0].comarcaLink = this.mappaths[comarca].url; - obj[1].comarcaLink = this.mappaths[comarca].url; - obj[2].comarcaLink = this.mappaths[comarca].url; + for (let i = 0; i < 3; i++) { + // populate all the values to all array objects to have it available + obj[i].comarcaName = this.mappaths[comarca].name; + obj[i].capitalComarca = this.mappaths[comarca].capital; + obj[i].contentText = this.mappaths[comarca].info; + obj[i].comarcaLink = this.mappaths[comarca].url; + } obj[0].node.id = i; obj[0].toBack(); @@ -215,17 +171,37 @@ class CatMap { obj[1].toFront(); obj[2].toFront(); - //Initial status hiden + //Initial status hidden obj[1].hide(); obj[2].hide(); return obj; } + get_comarca_and_capital_positions_label(comarca, bbox) { + let extra_x = 0; + let extra_y = 0; + if (this.mappaths[comarca].extra_x) { + extra_x = this.mappaths[comarca].extra_x; + } + + if (this.mappaths[comarca].extra_y) { + extra_y = this.mappaths[comarca].extra_y; + } + + const space_comarca = 15; + const comarca_x = bbox.x + ((bbox.width + extra_x) / 2); + const capital_x = comarca_x; + + const comarca_y = bbox.y + ((bbox.height + extra_y) / 2); + const capital_y = comarca_y + space_comarca; + return {comarca_x, capital_x, comarca_y, capital_y}; + } + remove_background(){ for (const comarca in this.mappaths) { let obj = this.mcat[comarca]; - if (obj[0].comarcaName != this.selected) { + if (obj[0].comarcaName !== this.selected) { let params = { 'fill': this.config.colorOut }; @@ -246,10 +222,9 @@ class CatMap { } else { if (this.config.button) { if (this.config.debug) { - console.log('button functionality enabled'); + console.log('Button functionality enabled'); } - $('#veure-contingut').show() - $('#veure-contingut').click(function () { + $('#veure-contingut').show().click(function () { $(this).toggleClass("veure-clic"); window.location = comarcaLink; return false; @@ -263,13 +238,13 @@ class CatMap { resizeMap(){ if (this.config.debug) { - console.log('resizeMap ...'); + console.log('ResizeMap'); } let self = this; this.paper.changeSize(this.config.mapWidth, this.config.mapHeight, true, false); if (this.config.debug) { - console.log('resize map with : ' + this.config.mapWidth + ' height : ' + this.config.mapHeight); + console.log('Resize map with : ' + this.config.mapWidth + ' height : ' + this.config.mapHeight); } $(".map").css({ @@ -303,7 +278,7 @@ class CatMap { hideComarcaName(){ for (const comarca in this.mappaths) { let obj = this.mcat[comarca]; - if (obj[1].comarcaName != this.selected) { + if (obj[1].comarcaName !== this.selected) { obj[1].hide(); } } @@ -311,7 +286,7 @@ class CatMap { responsiveResize(){ if (this.config.debug) { - console.log('responsiveResize ...'); + console.log('ResponsiveResize'); } this.winWidth = this.win.width(); @@ -362,7 +337,7 @@ class CatMap { this.winWidth = this.win.width(); if (this.config.debug) { - console.log('calling loadMapAndText ...'); + console.log('Calling loadMapAndText ...'); console.log('Create map with : ' + this.config.mapWidth + ' height : ' + this.config.mapHeight); console.log('Scale map : ' + this.config.scale); console.log('Ratio : ' + this.ratio); diff --git a/src/app/config/catalunya-map-config-local.js b/src/app/config/catalunya-map-config-local.js index 57ed484..fa8a81f 100644 --- a/src/app/config/catalunya-map-config-local.js +++ b/src/app/config/catalunya-map-config-local.js @@ -1,11 +1,11 @@ const MAP_CONFIG = { - url_json : "/js/catalunya-map-path-sample.json", + url_json : "/js/catalunya-map-path-sample-min.json", - debug: false, // enable/disable debug mode - responsive: true, // enable/disable responsive funcionality + debug: false, // enable/disable debug mode + responsive: true, // enable/disable responsive functionality useText: true, // enable/disable list text comarques - useListText: false, // enable/disable comarcas list text + useListText: false, // enable/disable comarques list text button: false, // enable/disable button functionality onClick: false, // enable/disable onclick open link newWindow: false, // enable/disable open a page in a new window for onClick functionality diff --git a/src/app/config/catalunya-map-config-prod.js b/src/app/config/catalunya-map-config-prod.js index 8e2c468..3234bcc 100644 --- a/src/app/config/catalunya-map-config-prod.js +++ b/src/app/config/catalunya-map-config-prod.js @@ -3,9 +3,9 @@ const MAP_CONFIG = { url_json : "/wp-content/plugins/catalunya-medieval-plugins/plugins/refreshMap/pages/js/catalunya-map-path.json", debug: false, // enable/disable debug mode - responsive: true, // enable/disable responsive funcionality + responsive: true, // enable/disable responsive functionality useText: true, // enable/disable list text comarques - useListText: true, // enable/disable comarcas list text + useListText: true, // enable/disable comarques list text button: false, // enable/disable button functionality onClick: false, // enable/disable onclick open link newWindow: false, // enable/disable open a page in a new window for onClick functionality diff --git a/src/app/config/catalunya-map-config-work.js b/src/app/config/catalunya-map-config-work.js index fb79f64..75f7bd1 100644 --- a/src/app/config/catalunya-map-config-work.js +++ b/src/app/config/catalunya-map-config-work.js @@ -2,10 +2,10 @@ const MAP_CONFIG = { url_json : "/wp-content/plugins/catalunya-medieval-plugins/plugins/refreshMap/pages/js/catalunya-map-path.json", - debug: true, // enable/disable debug mode - responsive: true, // enable/disable responsive funcionality + debug: true, // enable/disable debug mode + responsive: true, // enable/disable responsive functionality useText: true, // enable/disable list text comarques - useListText: false, // enable/disable comarcas list text + useListText: false, // enable/disable comarques list text button: false, // enable/disable button functionality onClick: false, // enable/disable onclick open link newWindow: false, // enable/disable open a page in a new window for onClick functionality diff --git a/web/index.html b/web/index.html index fcaadf1..3281898 100755 --- a/web/index.html +++ b/web/index.html @@ -2,7 +2,7 @@ - Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo V10.0 + Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo V11.0 @@ -13,7 +13,7 @@ - + @@ -31,7 +31,7 @@ -

Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo v10.0

+

Interactive Map of Catalunya SVG/VML and RaphaëlJs - Demo v11.0