Simple field.In the form shown on the map. When clicked. Longitude and latidute are marked in a text field. Joomla 2.5.x and 3.2.x.
Beta, do not use in production. Please leave your feedback.
Developed by: Laboratório Experimental em Mídias e Tecnologias, Pará Brasil
Plugin GMAP3.
Template List Gmap3 > Install and create template in Seblod.
Create field in form GMAP3.
The title (article title) field is "nome"
If you do not use the same name as the article field
Modify the file.
templates/seb_gmap3/positions/mapa.php
line 34
{latLng:[<?php echo $m[0]; ?>],data:'<?php echo $item->renderField( 'nome') ?>'},
Hugs
Hi Guys,
and thank you for sharing you plugin. I'm just working on a plugin like yours, but based on OpenStreetMap and Leaflet cause they are Open, Free and with no limitations.
I'm now working on the Seblod List/Template to show the markers on a map. But I never wrote a plugin for seblod so I think I'll start studing your code.
If you have any tricks to give me...
thx in advance.
I actually just made a Leaflet list template but I am not a good coder so there are some limitations. First, this template relies on the address to coordinates Seblod plugin (free). Next, it assumes that you are using the same field names that I used (longitude, latitute, art_title, and description). Finally, there are a couple extra markers added with no icons that I am planning to adapt into my next version to show different colors for different categories or something. This template is installed by copying the text into the index.php of the Seblod list template (free) from the Seblod store. I probably have some extra code in here that can be removed, but I don't actually know PHP and I pretty much just guessed my way through it... Here it is:
<?php
/**
* @version SEBLOD 3.x More
* @package SEBLOD (App Builder & CCK) // SEBLOD nano (Form Builder)
* @url http://www.seblod.com
* @editor Octopoos - www.octopoos.com
* @copyright Copyright (C) 2013 SEBLOD. All Rights Reserved.
* @license GNU General Public License version 2 or later; see _LICENSE.php
**/
defined( '_JEXEC' ) or die;
// -- Initialize
require_once dirname(__FILE__).'/config.php';
$cck = CCK_Rendering::getInstance( $this->template );
if ( $cck->initialize() === false ) { return; }
// -- Prepare
$class = trim( $cck->getStyleParam( 'class', '' ) );
$class = $class ? ' class="'.$class.'"' : '';
$display_mode = (int)$cck->getStyleParam( 'list_display', '0' );
$html = '';
$items = $cck->getItems();
$fieldnames = $cck->getFields( 'element', '', false );
$multiple = ( count( $fieldnames ) > 1 ) ? true : false;
$count = count( $items );
$auto_clean = ( $count == 1 ) ? $cck->getStyleParam( 'auto_clean', 0 ) : 0;
// -- Render
?>
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
<body>
<div id="map" style="width: max; height: 400px"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script>
var map = L.map('map').setView([40.2, -100.4], 3);
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: '../docs/images/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: '../docs/images/leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: '../docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: '../docs/images/leaf-orange.png'});
<?php
foreach( $items as $item) {
$longitude = $item->getValue('longitude');
$latitude = $item->getValue('latitude');
$arttitle = $item->getField('art_title');
$description = $item->getValue('description');
?>
L.marker([<?php echo "$latitude,$longitude"; ?>])
.bindPopup('<?php echo "$arttitle <br>$description"; ?>').addTo(map),
<?php
}
?>
L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);
L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© ' + osmLink + ' Contributors',
landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '© '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
var baseLayers = {
"Open Street Map": osmMap,
"Landscape View": landMap
};
map.addLayer(osmMap);
L.control.layers(baseLayers).addTo(map);
</script>
</body>
<?php
// -- Finalize
$cck->finalize();
?>
Thx ericdavisosu I'll open another post to share my Leaftlet code and I link it here
Hi abram,
A good place to start for developing a plugin is the SEBLOD Developer. It will generate the basic plugin with all of the required files. Then you can install it on a local Joomla/SEBLOD installation so that you can develop the code that you require.
hope that helps!
Randy
Hi Randy and Thank you for your help.
I've followed your suggestion and I've used SEBLOD Developer to create my custom base field. I've modified the code and ... wow it works.
Now I would like to customize also the backend of the field. I've to add some options like the default position of the map, I've tried to add this code to the xml file, but it doesn't appear anything:
<config>
<fields ... >
<fieldset name="basic"> ... </fieldset>
<fieldset name="mapOptions">
<field name="" type="text" default="[41.9100711, 12.5359979], 12" label="Position of the User Map" size="60" />
</fieldset>
...
could you help me?
to add settings in your field.
Edit file in tmpl/edit.php
add example:
Hi,
You can also add defaults in your Fields.xml file.
In the directory: Plugin>Install>fields you can add fields that you can use for your options settings.
Then you can reference them in the Plugin>tmpl>edit.php file as uriel stated above. The edit.php file will present your option fields when you are editing your field in the SEBLOD editor.
When you want to access these option fields in your main php plugin file, you can call them like so:
There is a good video here that Dan did a while ago...
hope that helps,
Randy
New version
Template List Gmap3 > Install and create template in Seblod
link is broken..
Links updated
