Skip to content

Commit

Permalink
Merge pull request #58 from eballo/map_improve_code_center_text_by_de…
Browse files Browse the repository at this point in the history 
…fault

version v11 - center text by default + upgrade raphael js library
  • Loading branch information
@eballo
eballo authored Apr 22, 2024
2 parents c637223 + 8316b15 commit 3e5d485
Show file tree
Hide file tree
Showing 11 changed files with 429 additions and 122 deletions.
18 changes: 8 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
Interactive vectorial map of Catalunya based on a SVG/VML and the library RaphaëlJs.


<img src="https://github.com/eballo/catalunya-map/blob/master/screenshot/screenshot-v10.png" alt="screen-shot" align="center" />
<img src="https://github.com/eballo/catalunya-map/blob/master/screenshot/screenshot-v11.png" alt="screen-shot" align="center" />

## 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
Expand Down Expand Up @@ -34,7 +34,7 @@ Interactive vectorial map of Catalunya based on a SVG/VML and the library Rapha
...
<meta name="viewport" content="width=device-width">
<!-- Jquery & Raphaeljs -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/scale.raphael.js"></script>
<!-- Bootstrap -->
Expand All @@ -43,29 +43,27 @@ Interactive vectorial map of Catalunya based on a SVG/VML and the library Rapha
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- custom styles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/catalunya-map-v2.css">
<link rel="stylesheet" href="css/catalunya-map-v3.css">
...
</header>

Explanation:
catalunya-map-v2.css : custom css theme (v1/v2)
catalunya-map-v3.css : custom css theme (v1/v2/v3)


1.2 footer

<footer>
...
<script type="text/javascript" src="js/catalunya-map-path.js"></script>
<script type="text/javascript" src="js/catalunya-map-path-sample.js"></script>
<script type="text/javascript" src="js/catalunya-map.min.js"></script>
...
</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

Expand Down
7 changes: 6 additions & 1 deletion changelog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,9 @@ v9.0

v10.0
- Migration to webpack
- add Comarca Llucanes
- 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
3 changes: 2 additions & 1 deletion demo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
- [Demo v10.0](http://demo.catalunyamedieval.es/map10)
- [Demo v11.0](http://demo.catalunyamedieval.es/map11)
Binary file added screenshot/Screenshot-v11.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
169 changes: 72 additions & 97 deletions src/app/catalunya-map.js
View file
Original file line number Diff line number Diff line change
@@ -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
*
*/
;
Expand All @@ -16,7 +16,7 @@ class CatMap {
this.win;
this.selected;
this.ratio;
this.mcat = {}; //Array of comarcas
this.mcat = {}; //Array of comarques
}

showValues(){
Expand All @@ -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()
Expand All @@ -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 = [];
Expand All @@ -62,15 +62,15 @@ class CatMap {
}
}else{
if(this.config.debug){
console.log("create list comarques is disabled")
console.log("Create list comarques is disabled")
}
}
}

createMap(){

if (this.config.debug) {
console.log('CreateMap ...');
console.log('CreateMap');
}

// This objects hack are needed because onHover function
Expand All @@ -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++;
Expand All @@ -186,46 +144,64 @@ 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();

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
};
Expand All @@ -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;
Expand All @@ -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({
Expand Down Expand Up @@ -303,15 +278,15 @@ 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();
}
}
}

responsiveResize(){
if (this.config.debug) {
console.log('responsiveResize ...');
console.log('ResponsiveResize');
}

this.winWidth = this.win.width();
Expand Down Expand Up @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions src/app/config/catalunya-map-config-local.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Loading

0 comments on commit 3e5d485

Please sign in to comment.