• Map with Rhomb cells
In this page I added PHP and CSS code snippets that can be used to create dynamically a Map with PHP.
CSS is used to display the map cells in different shapes: rectangles, parallelograms, and rhombs.
- The cells are <div> elements added in <blockquote> tags for each row. You can define the number of cels and columns.
Simple PHP Map with Rectangle shapes
<?php
// https://coursesweb.net/php-mysql
$nr = 20; // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5); // HERE add the number of alternate cols to each row
$css_class = 'map_cell'; // css class added in each cell
$addtxt = 1; // when is 1 add text in cell (cell number)
$map_html = ''; // stores the returned html code
// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];
// creates the html code
for($i=1; $i<=$nr; $i++) {
if($b == $cols[$x % 2]) {
$blk1 = '<blockquote class="rw'. ($x % 2) .'">';
$blk2 = '</blockquote>';
$use = $x % 2;
$b = 1;
$x++;
}
else {
$b++;
$blk1 = ''; $blk2 = '';
}
$map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;
// adds the remaining cells to complete the row
if($addtxt == 1 && $i == $nr) {
$addtxt = 0;
$nr += $cols[($use + 1) % 2] - $b;
}
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rectangles</title>
<style type="text/css">
div.map_cell{
float: left;
margin:1px 1px 0 0;
width: 100px;
height: 75px;
background: #abcdef;
border: 1px solid #000;
font-weight: bold;
text-align: center;
line-height:400%;
font-size: 20px;
}
blockquote.rw1 {
margin: 0 0 0 99px;
}
blockquote {
clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like in this image:
PHP Map with Parallelogram shapes
<?php
// https://coursesweb.net/
$nr = 20; // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5); // HERE add the number of alternate cols to each row
$css_class = 'map_cell'; // css class added in each cell
$addtxt = 1; // when is 1 add text in cell (cell number)
$map_html = ''; // stores the returned html code
// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];
// creates the html code
for($i=1; $i<=$nr; $i++) {
if($b == $cols[$x % 2]) {
$blk1 = '<blockquote class="rw'. ($x % 2) .'">';
$blk2 = '</blockquote>';
$use = $x % 2;
$b = 1;
$x++;
}
else {
$b++;
$blk1 = ''; $blk2 = '';
}
$map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;
// adds the remaining cells to complete the row
if($addtxt == 1 && $i == $nr) {
$addtxt = 0;
$nr += $cols[($use + 1) % 2] - $b;
}
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Parallelograms</title>
<style type="text/css">
div.map_cell{
float: left;
margin:1px 1px 0 0;
width: 100px;
height: 75px;
background: #abefcd;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
font-weight: bold;
font-size: 20px;
text-align: center;
line-height: 350%;
}
blockquote.rw1 {
margin: 0 0 0 99px;
}
blockquote:first-child {
margin: 0 0 0 45px;
}
blockquote {
clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
Map with Rhomb cells
<?php
// https://coursesweb.net/php-mysql/
$nr = 20; // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5); // HERE add the number of alternate cols to each row
$css_class = 'map_cell'; // css class added in each cell
$addtxt = 1; // when is 1 add text in cell (cell number)
$map_html = ''; // stores the returned html code
// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];
// creates the html code
for($i=1; $i<=$nr; $i++) {
if($b == $cols[$x % 2]) {
$blk1 = '<blockquote class="rw'. ($x % 2) .'">';
$blk2 = '</blockquote>';
$use = $x % 2;
$b = 1;
$x++;
}
else {
$b++;
$blk1 = ''; $blk2 = '';
}
$map_html .= $blk1 .'<div class="'. $css_class .'"><div>'. ($addtxt == 1 ? $i : '') .'</div></div>'. $blk2;
// adds the remaining cells to complete the row
if($addtxt == 1 && $i == $nr) {
$addtxt = 0;
$nr += $cols[($use + 1) % 2] - $b;
}
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rhombs</title>
<style type="text/css">
div.map_cell {
position: relative;
float: left;
width: 0;
height: 0;
margin-top: -49px;
border: 50px solid transparent;
border-bottom: 55px solid #05ed08;
}
div.map_cell:after {
position: absolute;
left: -50px;
top: 55px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 55px solid #05ed08;
content: '';
}
div.map_cell div {
position: relative;
margin: 45px auto 0 -10px;
font-weight: bold;
font-size: 20px;
z-index: 888;
text-align: center;
}
blockquote.rw1 {
margin: 0 0 0 90px;
}
blockquote {
clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this: