Skip to content

Commit d2a0224

Browse files
xbgmsharpxbgmsharp
committed
Add custom Pin/Marker support #19 
1 parent 120ab13 commit d2a0224

5 files changed

Lines changed: 258 additions & 68 deletions

File tree

‎admin/admin_config.php‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,15 @@
9090
$available_pin = array(
9191
'0' => l10n('NOPIN'),
9292
'1' => l10n('DEFAULTPIN'),
93-
'2' => l10n('LEAFPINGREEN'),
94-
'3' => l10n('LEAFPINORANGE'),
95-
'4' => l10n('LEAFPINRED'),
96-
'5' => l10n('MAPICONSBLEU'),
97-
'6' => l10n('MAPICONSGREEN'),
98-
'7' => l10n('OWNPIN'),
93+
'2' => l10n('DEFAULTPINGREEN'),
94+
'3' => l10n('DEFAULTPINRED'),
95+
'4' => l10n('LEAFPINGREEN'),
96+
'5' => l10n('LEAFPINORANGE'),
97+
'6' => l10n('LEAFPINRED'),
98+
'7' => l10n('MAPICONSBLEU'),
99+
'8' => l10n('MAPICONSGREEN'),
100+
'9' => l10n('OWNPIN'),
101+
'10' => l10n('IMAGE'),
99102
);
100103

101104
// Available popup
@@ -141,6 +144,15 @@
141144
'attrimagery' => get_boolean($_POST['osm_attrimagery']),
142145
'attrplugin' => get_boolean($_POST['osm_attrplugin']),
143146
),
147+
'pin' => array(
148+
'pin' => $_POST['osm_pin'],
149+
'pinpath' => $_POST['osm_pinpath'],
150+
'pinsize' => $_POST['osm_pinsize'],
151+
'pinshadowpath' => $_POST['osm_pinshadowpath'],
152+
'pinshadowsize' => $_POST['osm_pinshadowsize'],
153+
'pinoffset' => $_POST['osm_pinoffset'],
154+
'pinpopupoffset' => $_POST['osm_pinpopupoffset'],
155+
),
144156
);
145157

146158
// Update config to DB

‎admin/admin_config.tpl‎

Lines changed: 141 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -108,23 +108,26 @@ Refer to the <a href="https://github.com/xbgmsharp/piwigo-openstreetmap/wiki" ta
108108
<legend>{'G_MAP'|@translate}</legend>
109109
<ul>
110110
<li>
111+
<img id="tile_preview" align="right" src="">
111112
<label>{'BASELAYER'|@translate} : </label>
112-
<select name="osm_baselayer">
113+
<select name="osm_baselayer" id="osm_baselayer" onchange="tile_toggle(this)">
113114
{html_options options=$AVAILABLE_BASELAYER selected=$map.baselayer}
114115
</select>
115116
<br/><small>{'BASELAYER_DESC'|@translate}</small><br/>
116117
<small>Check out <a href="http://leaflet-extras.github.io/leaflet-providers/preview/" target="_blank">this example</a> with half a hundred different layers to choose from.</small>
117118
</li>
118-
<li>
119-
<label>{'CUSTOMBASELAYER'|@translate} : </label>
120-
<input type="text" value="{$map.custombaselayer}" name="osm_custombaselayer" size="40"/>
121-
<br/><small>{'CUSTOMBASELAYER_DESC'|@translate}</small>
122-
</li>
123-
<li>
124-
<label>{'CUSTOMBASELAYERURL'|@translate} : </label>
125-
<input type="text" value="{$map.custombaselayerurl}" name="osm_custombaselayerurl" size="40"/>
126-
<br/><small>{'CUSTOMBASELAYERURL_DESC'|@translate}</small>
127-
</li>
119+
<div id="custom-tile-toggle" style="visibility:hidden; width:0px; height:0px; display:none;">
120+
<li>
121+
<label>{'CUSTOMBASELAYER'|@translate} : </label>
122+
<input type="text" value="{$map.custombaselayer}" name="osm_custombaselayer" size="40"/>
123+
<br/><small>{'CUSTOMBASELAYER_DESC'|@translate}</small>
124+
</li>
125+
<li>
126+
<label>{'CUSTOMBASELAYERURL'|@translate} : </label>
127+
<input type="text" value="{$map.custombaselayerurl}" name="osm_custombaselayerurl" size="40"/>
128+
<br/><small>{'CUSTOMBASELAYERURL_DESC'|@translate}</small>
129+
</li>
130+
</div>
128131
<li>
129132
<label>{'NOWORLDWARP'|@translate} : </label>
130133
<label><input type="radio" name="osm_noworldwarp" value="true" {if $map.noworldwarp}checked="checked"{/if}/> {'Yes'|@translate}</label>
@@ -149,53 +152,145 @@ Refer to the <a href="https://github.com/xbgmsharp/piwigo-openstreetmap/wiki" ta
149152
<label><input type="radio" name="osm_attrplugin" value="false" {if not $map.attrplugin}checked="checked"{/if}/> {'No'|@translate}</label>
150153
<br/><small>{'ATTRPLUGIN_DESC'|@translate}</small>
151154
</li>
155+
152156
</ul>
153-
<!-- <fieldset>
157+
<fieldset>
154158
<legend>{'H_PIN'|@translate}</legend>
155159
<ul>
156160
<li>
157-
<label>{'PIN'|@translate} : </label>
158-
<select name="osm_pin">
159-
{html_options options=$AVAILABLE_PIN selected=$SELECTED_PIN}
161+
<img id="pin_preview" align="left" src="">
162+
<label >{'PIN'|@translate} : </label>
163+
<select name="osm_pin" id="osm_pin" onchange="pin_toggle(this)">
164+
{html_options options=$AVAILABLE_PIN selected=$pin.pin}
160165
</select>
161166
<br/><small>{'PIN_DESC'|@translate}</small>
162167
</li>
163-
<li>
164-
<label>{'PINPATH'|@translate} : </label>
165-
<input type="text" value="{$PINPATH}" name="osm_pinpath" size="40"/>
166-
<br/><small>{'PINPATH_DESC'|@translate}</small>
167-
</li>
168-
<li>
169-
<label>{'PINSIZE'|@translate} : </label>
170-
<input type="text" value="{$CUSTOMBASELAYERURL}" name="osm_pinsize" size="6/>
171-
<br/><small>{'PINSIZE_DESC'|@translate}</small>
172-
</li>
173-
<li>
174-
<label>{'PINSHADOWPATH'|@translate} : </label>
175-
<input type="text" value="{$PINSHADOWPATH}" name="osm_pinshadowpath" size="40"/>
176-
<br/><small>{'PINSHADOWPATH_DESC'|@translate}</small>
177-
</li>
178-
<li>
179-
<label>{'PINSHADOWSIZE'|@translate} : </label>
180-
<input type="text" value="{$PINSHADOWSIZE}" name="osm_pinshadowsize" size="4"/>
181-
<br/><small>{'PINSHADOWSIZE_DESC'|@translate}</small>
182-
</li>
183-
<li>
184-
<label>{'PINOFFSET'|@translate} : </label>
185-
<input type="text" value="{$PINOFFSET}" name="osm_pinoffset" size="4"/>
186-
<br/><small>{'PINOFFSET_DESC'|@translate}</small>
187-
</li>
188-
<li>
189-
<label>{'PINPOPUPOFFSET'|@translate} : </label>
190-
<input type="text" value="{$PINPOPUPOFFSET}" name="osm_pinpopupoffset" size="4"/>
191-
<br/><small>{'PINPOPUPOFFSET_DESC'|@translate}</small>
192-
</li>
168+
<div id="custom-pin-toggle" style="visibility:hidden; width:0px; height:0px; display:none;">
169+
<li>
170+
<label>{'PINPATH'|@translate} : </label>
171+
<input type="text" value="{$pin.pinpath}" name="osm_pinpath" size="40"/>
172+
<br/><small>{'PINPATH_DESC'|@translate}</small>
173+
</li>
174+
<li>
175+
<label>{'PINSIZE'|@translate} : </label>
176+
<input type="text" value="{$pin.pinsize}" name="osm_pinsize" size="6"/>
177+
<br/><small>{'PINSIZE_DESC'|@translate}</small>
178+
</li>
179+
<li>
180+
<label>{'PINSHADOWPATH'|@translate} : </label>
181+
<input type="text" value="{$pin.pinshadowpath}" name="osm_pinshadowpath" size="40"/>
182+
<br/><small>{'PINSHADOWPATH_DESC'|@translate}</small>
183+
</li>
184+
<li>
185+
<label>{'PINSHADOWSIZE'|@translate} : </label>
186+
<input type="text" value="{$pin.pinshadowsize}" name="osm_pinshadowsize" size="4"/>
187+
<br/><small>{'PINSHADOWSIZE_DESC'|@translate}</small>
188+
</li>
189+
<li>
190+
<label>{'PINOFFSET'|@translate} : </label>
191+
<input type="text" value="{$pin.pinoffset}" name="osm_pinoffset" size="4"/>
192+
<br/><small>{'PINOFFSET_DESC'|@translate}</small>
193+
</li>
194+
<li>
195+
<label>{'PINPOPUPOFFSET'|@translate} : </label>
196+
<input type="text" value="{$pin.pinpopupoffset}" name="osm_pinpopupoffset" size="4"/>
197+
<br/><small>{'PINPOPUPOFFSET_DESC'|@translate}</small>
198+
</li>
199+
</div>
193200
</ul>
194201
</fieldset>
195-
-->
196202
</fieldset>
197203
198204
<p>
199205
<input class="submit" type="submit" value="{'Save Settings'|@translate}" name="submit"/>
200206
</p>
201207
</form>
208+
209+
{literal}
210+
<script type="text/javascript">
211+
function tile_toggle()
212+
{
213+
var div = document.getElementById("custom-tile-toggle");
214+
var select = document.getElementById("osm_baselayer");
215+
//alert(select.selectedIndex);
216+
if (select.selectedIndex == 8) // If custom
217+
{
218+
div.removeAttribute("style");
219+
} else {
220+
div.setAttribute("style","visibility:hidden; width:0px; height:0px; display:none;");
221+
}
222+
tile_preview();
223+
}
224+
225+
function pin_toggle()
226+
{
227+
var div = document.getElementById("custom-pin-toggle");
228+
var select = document.getElementById("osm_pin");
229+
//alert(select.selectedIndex);
230+
if (select.selectedIndex == 9) // If custom
231+
{
232+
div.removeAttribute("style");
233+
} else {
234+
div.setAttribute("style","visibility:hidden; width:0px; height:0px; display:none;");
235+
}
236+
pin_preview();
237+
}
238+
239+
function tile_preview()
240+
{
241+
var select = document.getElementById("osm_baselayer");
242+
baselayer = new Array(
243+
'https://c.tile.openstreetmap.org/5/15/11.png',
244+
'http://c.www.toolserver.org/tiles/bw-mapnik/5/15/11.png',
245+
'http://c.tile.openstreetmap.fr/hot/5/15/11.png',
246+
'http://c.tile.openstreetmap.de/tiles/osmde/5/15/11.png',
247+
'http://c.tile.openstreetmap.fr/hot/5/15/11.png',
248+
'http://otile1.mqcdn.com/tiles/1.0.0/osm/5/15/11.png',
249+
'http://oatile1.mqcdn.com/tiles/1.0.0/sat/5/15/11.png',
250+
'http://a.tile.cloudmade.com/7807cc60c1354628aab5156cfc1d4b3b/997/256/5/15/11.png',
251+
'NULL'
252+
);
253+
//alert(baselayer[select.selectedIndex]);
254+
var img_elem = document.getElementById("tile_preview");
255+
if (baselayer[select.selectedIndex] == "NULL")
256+
{
257+
img_elem.setAttribute("style","visibility:hidden; width:0px; height:0px; display:none;");
258+
} else {
259+
img_elem.removeAttribute("style");
260+
img_elem.src = baselayer[select.selectedIndex];
261+
}
262+
}
263+
264+
function pin_preview()
265+
{
266+
var select = document.getElementById("osm_pin");
267+
pins = new Array(
268+
'NULL',
269+
'{/literal}{$OSM_PATH}{literal}leaflet/images/marker-blue.png',
270+
'{/literal}{$OSM_PATH}{literal}leaflet/images/marker-green.png',
271+
'{/literal}{$OSM_PATH}{literal}leaflet/images/marker-red.png',
272+
'{/literal}{$OSM_PATH}{literal}leaflet/images/leaf-green.png',
273+
'{/literal}{$OSM_PATH}{literal}leaflet/images/leaf-orange.png',
274+
'{/literal}{$OSM_PATH}{literal}leaflet/images/leaf-red.png',
275+
'{/literal}{$OSM_PATH}{literal}leaflet/images/mapicons-blue.png',
276+
'{/literal}{$OSM_PATH}{literal}leaflet/images/mapicons-green.png',
277+
'NULL',
278+
'NULL'
279+
);
280+
//alert(pins[select.selectedIndex]);
281+
var img_elem = document.getElementById("pin_preview");
282+
if (pins[select.selectedIndex] == "NULL")
283+
{
284+
img_elem.setAttribute("style","visibility:hidden; width:0px; height:0px; display:none;");
285+
} else {
286+
img_elem.removeAttribute("style");
287+
img_elem.setAttribute("style","padding-right: 5px;");
288+
img_elem.src = pins[select.selectedIndex];
289+
}
290+
}
291+
292+
window.onload = pin_preview();
293+
window.onload = tile_preview();
294+
295+
</script>
296+
{/literal}

‎language/en_UK/plugin.lang.php‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,18 @@
5353

5454
$lang['H_PIN'] = "Pin configuration";
5555
$lang['PIN'] = "Select pin";
56-
$lang['PIN_DESC'] = 'Select the last option if you want to use your own.';
57-
$lang['OWNPIN'] = "own (custom style)";
58-
$lang['NOPIN'] = "no pin";
59-
$lang['DEFAULTPIN'] = "default";
56+
$lang['PIN_DESC'] = 'Select the icon you want, will appear as show on the right.';
57+
$lang['OWNPIN'] = "Own pin (custom style)";
58+
$lang['NOPIN'] = "No pin";
59+
$lang['DEFAULTPIN'] = "Default Leaflet blue";
60+
$lang['DEFAULTPINGREEN'] = "Default Leaflet green";
61+
$lang['DEFAULTPINRED'] = "Default Leaflet red";
62+
$lang['LEAFPINGREEN'] = "Alt Leaflet green";
63+
$lang['LEAFPINORANGE'] = "Alt Leaflet orange";
64+
$lang['LEAFPINRED'] ="Alt Leaflet red";
65+
$lang['MAPICONSBLEU'] = "MapsIcons bleue";
66+
$lang['MAPICONSGREEN'] = "MapsIcons green";
67+
$lang['IMAGE'] = "Use photo square thumbnail";
6068
$lang['PINPATH'] = "Own pin (custom style)";
6169
$lang['PINPATH_DESC'] = "Path to your pin (only if 'own' is selected).";
6270
$lang['PINSIZE'] = "Pin size";

‎maintain.inc.php‎

100755100644
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,15 @@ function plugin_install()
7272
'attrimagery' => true,
7373
'attrplugin' => true,
7474
),
75+
'pin' => array(
76+
'pin' => 1,
77+
'pinpath' => '',
78+
'pinsize' => '',
79+
'pinshadowpath' => '',
80+
'pinshadowsize' => '',
81+
'pinoffset' => '',
82+
'pinpopupoffset' => '',
83+
),
7584
);
7685
/* Add configuration to the config table */
7786
$conf['osm_conf'] = serialize($default_config);

0 commit comments

Comments
 (0)